jQuery通过单击列表项来切换独立div

Question

我想要呈现一个项目的水平列表，每个项目都通过"id"连接到一个独立的div。我希望连接到项目的div切换Fade。默认情况是隐藏所有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不太熟练，任何帮助或指导都将不胜感激！

Answer 1

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

$(document).ready(function() {
    $(".menubox").hide();
    $(".menuitem").click(function(event) {
        event.preventDefault();
        $('.menubox').hide();
        $($(this).attr('href')).fadeToggle("slow","linear");;
    });
});​

Answer 2

$(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"); 
    });
});

工作小提琴。