Question

<div id="nav">
<a href="#" id="l1">link1</a><br>
<a href="#" id="l2">link2</a><br>
<a href="#" id="l3">link3</a><br>
</div>

<div id="content" style="background:pink;">
INDEX
</div>

    <div id="content1"  style="display:none; background:red;">
         11111111
    </div>

    <div id="content2" style="display:none; background:yellow;">
         22222222
    </div>

    <div id="content3" style="display:none; background:blue;">
         33333333
    </div>

<style>
#nav{
height:300px;
width:80px;
background:gray;
}

#content,#content1,#content2,#content3{
height:300px;
width:600px;
position:absolute;
left:90px;
top:8px;
text-align:middle;
}
</style>

 <script src="jquery.js"></script>
<script>
$("#l1").click(function(){
$("#content,#content2,#conten3").hide();
$("#content1").toggle();
});
$("#l2").click(function(){
$("#content,#content1,#conten3").hide();
$("#content2").toggle();
});
$("#l3").click(function(){
$("#content,#content1,#conten2").hide();
$("#content3").toggle();
});
</script>

这是代码，每个链接只能成功点击一次，为什么？（我只能点击1到2到3，如果我想点击返回1，则失败。）

Answer 1

您的选择器中有拼写错误 - 错过了t行中content中的hide。这意味着#content3永远不再被隐藏，并且始终保持在其他两个div的顶部。

See working jsFiddle

Answer 2

在寂寞的日子里，一些选择器缺少't'。

您还应该使用fadeIn而不是切换。双击同一选项卡将继续显示所选的div。

为什么jQuery fadein只能执行一次

2 个答案: