jquery - 为什么jQuery fadein只能执行一次

<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，则失败。）

最佳答案

选择器中有一个错字-在每一个t行中的content中都缺少hide。这意味着#content3再也不会被隐藏，并且始终停留在其他两个div的顶部。

See working jsFiddle。