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。

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

2 个答案: