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。有没有其他方法可以使用简单的脚本来完成它？

我的小提琴示例：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 LINK

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>

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

2 个答案: