Question

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

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

试试这个

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

尝试一点javascript并避免css~焦点。 Fiddle Link。您可以使用纯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>

脚本

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

即使点击也能使div保持不变

2 个答案: