为什么jQuery fadein只能执行一次

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

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

See working jsFiddle。

Answer 2

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

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