javascript - 菜单点击显示具有相同 id : variable scope issue? 的 div

Question

我是 jQuery 和 javascript 的新手，所以请原谅代码的不雅，但我正在努力掌握它，并感谢任何人的帮助。

我正在尝试创建一个选项卡式菜单，该菜单采用单击的菜单项的 ID 并显示具有相同 ID 的内容 div。我让它与每个单独的菜单项和配对的内容 div 一起使用代码块，但我正在尝试添加变量，以便可以即时指定匹配的 id 并用于选择和显示正确的内容 div。

    var clickedId;
    var storedMenu;
    var storedContent;
    $(".nav ul li").click(function() {
       clickedId = $(this).attr("id");
       storedMenu = ("nav ul li#" + clickedId);
       storedContent = (".content div#" + clickedId);
    }); 

    $(storedMenu).click(function(){
        if ($(storedContent).hasClass("hidden")) 
            {
            $(".content div:not('.hidden')").toggleClass("hidden");
            $(storedContent).toggleClass("hidden");
            $(".nav ul li:not('.filed')").toggleClass("filed");
            $(storedMenu).toggleClass("filed");
            }
    });

当我在控制台中检查它们时，这些变量现在具有我希望它们具有的值，但显然没有传递给第二个点击函数。

仅供引用，这是单个项目的功能模板:

    $(".nav ul li#main").click(function(){
        if ($(".content div#main").hasClass("hidden")) 
            {
            $(".content div:not('.hidden')").toggleClass("hidden");
            $(".content div#main").toggleClass("hidden");
            $(".nav ul li:not('.filed')").toggleClass("filed");
            $(".nav ul li#main").toggleClass("filed");
            }
    });

这是一个带有非功能变量版本(包括 html 和 css)的 jsFiddle:http://jsfiddle.net/BHAyc/

提前致谢!

Answer 1

我会放弃标签的 id(除非你需要每个标签的单独样式)并使用 anchor 链接，这样你就可以轻松地引用需要显示的内容，我也会使用一个类来标记事件标签而不是反过来

HTML

<div class="nav">
    <ul>
        <li class="active"><a href="#main">Main</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

CSS

.nav li{
    border-bottom: 1px solid black;
}

.nav li.active{
    border-bottom: 0
}

Javascript

$(".nav ul li a").click(function(e) {
    e.preventDefault();
    //hide all content
    $('.content > div').addClass('hidden');
    //remove active link
    $('.nav ul li.active').removeClass('active')
    //show target content
    $($(this).attr('href')).removeClass('hidden');
    //mark tab as active
    $(this).parent().addClass('active');
}); 

Demo fiddle