jquery - 菜单链接在另一个 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将隐藏。