javascript - 基于基于列表的菜单隐藏或显示 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>

我还在 stack-overflow 上找到了一个例子它做类似的事情。

好像用的是我不熟悉的Dojo。有没有其他方法可以用一个简单的脚本来做到这一点？

我的 fiddle 示例: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/