菜单链接显示/隐藏另一个div中的内容

Question

我想弄清楚如何编写一个脚本，当在左侧导航栏中单击链接时，它将在右侧主列中显示文本。所以，当你第一次到达页面时，网站的主要部分将不会出现任何内容。内容（更具体地说，页面）仅在点击链接后出现。当你点击另一个链接时，先前的内容被隐藏，并显示新的文本。

<div class="nav"> 


     <ul id="menu"> 


     <li id="link1"><a href="#">Topic One</a></li> 


     <li id="link2"><a href="#">Topic Two</a></li> 


     <li id="link3"><a href="#">Topic Three</a></li> 


    </ul> 


</div> 


<div class="main"> 


    <div id="page1" class="content"> 


    <h1>Show Page1</h1> 


    </div> 


    <div id="page2" class="content"> 


    <h1>Show Page2</h1> 


    </div> 


    <div id="page3" class="content"> 


    <h1>Show Page3</h1> 


    </div>    


</div> 

Answer 1

只有几行使用jQuery。这里的的jsfiddle - http://jsfiddle.net/dangoodspeed/M3ZhV/和下面的代码：

$(function() { 
    var curPage=""; 
    $("#menu a").click(function() { 
     if (curPage.length) { 
      $("#"+curPage).hide(); 
     } 
     curPage=$(this).data("page"); 
     $("#"+curPage).show(); 
    }); 
}); 

Answer 2

这将显示您想，如果你点击链接，并隐藏其他内容内容：

$('#link1').click(function(){ 
    $('#content1').show(); 
    $('#content2').hide(); 
    $('#content3').hide(); 
); 
$('#link2').click(function(){ 
    $('#content2').show(); 
    $('#content1').hide(); 
    $('#content3').hide(); 
); 
$('#link3').click(function(){ 
    $('#content3').show(); 
    $('#content2').hide(); 
    $('#content1').hide(); 
); 

例如，如果你点击link1 ，content1会显示并且content2和content3会隐藏。