0

我想呈现一个水平的项目列表，每个项目都通过一个“id”连接到一个独立的 div。我希望连接到项目的 div 切换淡入淡出。默认是隐藏所有 div。然后当用户点击另一个项目时，之前打开的 div 将关闭。

这是html：

<div id="menu">
        <ul>
            <li><a class="menuitem" href="#smPlates">Small Plates</a></li>
            <li><a class="menuitem" href="#salads">Salads</a></li>
            <li><a class="menuitem" href="#burgers">Burgers</a></li>
            <li><a class="menuitem" href="#desserts">Desserts</a></li>
        </ul>

        <!-- Small Plates menu -->
        <div class="menubox" id="smPlates">
            <p>Content of smPlates</p>
        </div>

        <!-- Salads menu -->
        <div class="menubox" id="salads">
               <p>Content of salads</p>
        </div>

        <!-- Burgers menu -->
        <div class="menubox" id="burgers">
               <p>Content of burgers</p>
        </div>

        <!-- Desserts menu -->
        <div class="menubox" id="desserts">
                <p>Content of desserts</p>
        </div>
</div>

我有以下 jQuery 代码可以有效地切换 div，但所有这些，我尝试使用 attr('id') 获取每个列表项的相应 div，但它没有工作：

$(document).ready(function() {
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();
        var menubox = $(".menubox");
        $(".menubox").not(menubox).hide()
        menubox.fadeToggle("slow","linear"); 
    });
});

我对 jQuery 的熟练程度不高，任何帮助或指导将不胜感激！

4

2 回答 2

1

工作解决方案：http: //jsfiddle.net/9Cxx2/

$(document).ready(function() {
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();

        $('.menubox').hide();

        $($(this).attr('href')).fadeToggle("slow","linear");;

    });
});​
于 2012-12-28T00:02:56.847 回答
0 
$(document).ready(function() {

    // Hide all menuboxes initially
    $(".menubox").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();

        // Hide the menubox that is allready opened
        $(".menubox").hide();

        // Get the new menubox from the href attribute of menuitem
        var relatedDivID = $(this).attr('href');

        // Fade new menubox
        $(relatedDivID).fadeToggle("slow","linear"); 
    });
});

工作小提琴。

于 2012-12-28T00:04:49.480 回答