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>

Here is the code, every link can only successfully click once, why? (i can only click 1 to 2 to 3, and if i want click back to 1, failed.)

Answer 1

You have a typo in your selectors — missing the t in content in each of the hide lines. This meant that #content3 was never hidden again, and always stayed over the top of the other two divs.

See working jsFiddle.