基于基于列表的菜单隐藏或显示div内容的最佳方法

Question

我必须根据菜单选择显示或隐藏div的内容。

下面是我的结构

    <div id = "menuContainer">
        <p>Menu</p>
        <ul>
            <li><a href = "#">Home</a></li>
            <li><a href = "#">Menu Two</a>
                <ul>
                    <li><a href = "#">Sub Menu One</a></li>
                    <li><a href = "#">Sub Menu Two</a></li>
                    <li><a href = "#">Sub Menu Three</a></li>
                    <li><a href = "#">Sub Menu Four</a></li>
                </ul>
            </li>
            <li><a href = "#">Menu Three</a></li>
            <li><a href = "#">Contact</a></li>
        </ul>
    </div>

<div class="row"> 
    <div id="home" > <h1>This is Home Page </h1></div>
      <div id="MenuTwo" class="content"> <h1>This is  Menu Two page</h1></div>
      <div id="SubMenuOne" class="content"><h1> This is Sub Menu One Page</h1></div>
      <div id="SubMenuTwo" class="content"><h1>This is Sub Menu Two Page </h1></div>
      <div id="SubMenuThree" class="content"> <h1>This is Sub Menu THree Page</h1></div>
      <div id="SubMenuFour" class="content"><h1> This is Sub Menu Four Page</h1></div>
      <div id="MenuThree" class="content"> <h1>This is  Menu THree Page</h1></div>
      <div id="MenuFour" class="content"> <h1>This is  Menu Four Page</h1></div>
      <div id="Contact" class="content"> <h1>This is Contact  Page</h1></div>
</div>

我也找到了一个关于堆栈溢出的例子，它做了类似的事情。

好像使用我不熟悉的Dojo 。 还有其他简单的脚本来做到这一点吗？

我的小提琴示例： http : //jsfiddle.net/bG46Z/1/

Answer 1

如果您想在Dojo中做同样的事情，也可以：

require([ "dojo/query", "dojo/dom-attr", "dojo/domReady!", "dojo/NodeList-dom", "dojo/NodeList-traverse" ], function(query, domAttr) {
    query("#menuContainer a").on("click", function(evt) {
        query(".row > div")
            .style("display", "none")
            .parents(".row")
            .query(domAttr.get(evt.target, "href"))
            .style("display", "block");
    });
});

例如： http : //jsfiddle.net/YBae9/

Answer 2

JSFIDDLE 链接

JQUERY：

$(document).ready(function () {
    $('.row div').hide();
    $('#home').show(); // if you want to show the home div first
    $('#menuContainer a').click(function () {
        var id = $(this).attr('href');
        $('.row div').hide();
        $(id).fadeIn("250");
    });
});

新的HTML：

 <div id = "menuContainer">
        <p>Menu</p>
        <ul>
            <li><a href = "#home">Home</a></li>
            <li><a href = "#MenuTwo">Menu Two</a>
                <ul>
                    <li><a href = "#SubMenuOne">Sub Menu One</a></li>
                    <li><a href = "#SubMenuTwo">Sub Menu Two</a></li>
                    <li><a href = "#SubMenuThree">Sub Menu Three</a></li>
                    <li><a href = "#SubMenuFour">Sub Menu Four</a></li>
                </ul>
            </li>
            <li><a href = "#MenuThree">Menu Three</a></li>
            <li><a href = "#Contact">Contact</a></li>
        </ul>
    </div>

<div class="row"> 
    <div id="home" > <h1>This is Home Page </h1></div>
      <div id="MenuTwo" class="content"> <h1>This is  Menu Two page</h1></div>
      <div id="SubMenuOne" class="content"><h1> This is Sub Menu One Page</h1></div>
      <div id="SubMenuTwo" class="content"><h1>This is Sub Menu Two Page </h1></div>
      <div id="SubMenuThree" class="content"> <h1>This is Sub Menu THree Page</h1></div>
      <div id="SubMenuFour" class="content"><h1> This is Sub Menu Four Page</h1></div>
      <div id="MenuThree" class="content"> <h1>This is  Menu THree Page</h1></div>
      <div id="MenuFour" class="content"> <h1>This is  Menu Four Page</h1></div>
      <div id="Contact" class="content"> <h1>This is Contact  Page</h1></div>
</div>