make the div stay even when click - css

Question

I wanted to change div content between clicking 2 links.
I solved it but upon clicking on the 2nd link, if you click on other spaces it will return to the default div. basically what i want is when you click on the second link, and when you click on the space around it, it would not return to previous link! Can anyone help me solve this?
JSFiddle example
CSS:
#button1 {position:fixed;top:120px;left:150px;}
#button2 {position:fixed;top:120px;left:290px;}
#button1:focus~#content #default,
#button2:focus~#content #default
{display:none;}
#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3) {display:block;}
#content {
border:1px dashed black;
width:800px;
height:auto;
position:fixed;
left:150px;
top:150px;
background-color:#E2E2E2;
color:black;
font-size:10px;
text-align:center;
}
#percent,#dollar {display:none;}
#default,#percent{
width:800px;
height:499px;
background-image:url(images/image2.jpg);
}
#dollar{
width:800px;
height:499px;
background-image:url(images/image1.jpg);
}
.bar1{
width:54px;
height:138px;
margin-left:102px;
padding-top:110px;
}
HTML
<a id="button1" href="#" tabindex="1">View in Percentage</a>
<a id="button2" href="#" tabindex="2">View in Absolute Dollar</a>
<div id="content">
<div id="default">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="percent">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="dollar">dollar content will go here.</div>
</div>

Answer 1

try this
html
<div id="main">
<a id="button1" href="#" tabindex="1">View in Percentage</a>
<a id="button2" href="#" tabindex="2">View in Absolute Dollar</a>
<div class="content_one">
percentage viewed
</div>
<div class="content_two">
Absolute dollar viewed
</div>
</div>
css
*
{margin:0;
padding:0;
}
#main
{width:1000px;
margin:0 auto;
}
.content_one
{width:500px;
height:300px;
background:#CCC;
position:absolute;
}
.content_two
{width:500px;
height:300px;
background:#333;
position:absolute;
z-index:-1;
}
js
$("#button1").click(function() {
$(".content_two").hide();
$(".content_one").show();
});
$("#button2").click(function() {
$(".content_one").hide();
$(".content_two").show();
});

Answer 2

Try a little bit of javascript and avoid the css~focus. Fiddle Link. You can use plain javascript to achieve this. No need for extra libraries or anything. Once I removed the focus, the issue of changing the div was solved.
refer the following code
View in Percentage
View in Absolute Dollar
<div id="content">
<div id="percent">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="dollar">dollar content will go here.</div>
</div>
script
function show1(){
document.getElementById('percent').style.display = 'block';
document.getElementById('dollar').style.display = 'none';
}
function show2(){
document.getElementById('percent').style.display = 'none';
document.getElementById('dollar').style.display = 'block';
}
css
#button1 {position:fixed;top:120px;left:150px;}
#button2 {position:fixed;top:120px;left:290px;}
#content {
border:1px dashed black;
width:800px;
height:auto;
position:fixed;
left:150px;
top:150px;
background-color:#E2E2E2;
color:black;
font-size:10px;
text-align:center;
}
#dollar {display:none;}
#percent{
width:800px;
height:499px;
background-image:url(images/image2.jpg);
}
#dollar{
width:800px;
height:499px;
background-image:url(images/image1.jpg);
}
.bar1{
width:54px;
height:138px;
margin-left:102px;
padding-top:110px;
}