菜单链接显示/隐藏另一个div中的内容 [英] Menu links show/hide content in another div

问题描述

我试图弄清楚如何编写脚本，在该脚本中，当单击左侧导航栏中的链接时，它将在右侧主栏中显示文本.因此，当您第一次访问该页面时，该站点的主要部分将不会显示任何内容.内容(更具体地说是页面)仅在单击链接后出现.当您单击另一个链接时，先前的内容将被隐藏，并显示新的文本.

I'm trying to figure out how to write a script where when a link is clicked in the left nav column, it will display text in the right main column. So, when you first arrive to the page, nothing will appear in the main portion of the site. Content(more specifically page) only appears after clicking on a link. When you click on another link, the previous content is hidden, and the new text is displayed.

  <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>

推荐答案

仅使用jQuery几行.这是JSfiddle- http://jsfiddle.net/dangoodspeed/M3ZhV/，下面是代码:

Only a few lines with jQuery. Here's the JSfiddle - http://jsfiddle.net/dangoodspeed/M3ZhV/ and here's the code:

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

这篇关于菜单链接显示/隐藏另一个div中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！