Css 使div在单击时保持平衡

我想在点击两个链接之间更改div内容。 我解决了这个问题，但是当你点击第二个链接时，如果你点击其他空间，它将返回到默认的div。基本上我想要的是当你点击第二个链接时，当你点击它周围的空间时，它将不会返回到上一个链接！谁能帮我解决这个问题

CSS:

HTML

美元内容将转到这里。

试试这个

html

js

---

尝试一点javascript，避免css~focus。您可以使用普通javascript来实现这一点。不需要额外的库或任何东西。一旦我删除了焦点，更改div的问题就解决了

请参阅以下代码

按百分比查看 绝对美元观

<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>

css

<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>

<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>

*
{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;
}

$("#button1").click(function() {

    $(".content_two").hide();
    $(".content_one").show();

});

$("#button2").click(function() {

    $(".content_one").hide();
    $(".content_two").show();

});

<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>

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';
  }

#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;
}