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

这是一个jsFiddle与无功能的变量版本（包括html和css）：http://jsfiddle.net/BHAyc/

提前致谢！

Answer 1

我会删除标签的id（除非你需要每个标签的个人风格）并使用锚链接，这样你就可以轻松地引用需要出现的内容，我也会使用一个类来标记活动标签而不是另一种方式

<强> 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

Answer 2

您需要唯一的ID，这就是ID。

尝试给div一个从菜单项ID中派生的ID，如下所示：

菜单项ID =第13页要显示的内容div具有ID = content-page13

您所要做的就是将“content-”添加到选择器和div的ID中，它将起作用。

Answer 3

页面上不应该有2个具有相同ID的元素。 ID属性应该是唯一的。此外，如果您想在链接中使用href =“＃ID_OF_DIV”并使用CSS片段隐藏和显示内容，则可以使用纯CSS。

我使用“nav-ID_OF_DIV”作为li（菜单ID），在JavaScript中删除了带有正则表达式的id的“nav-”前缀替换/ ^ nav - /。

http://jsfiddle.net/BHAyc/1/

JS

// hide all content
$(".content > div").hide();
// show the first content div
$(".content > div:first").show();

$(".nav ul li").click(function() {
   clickedId = $(this).attr("id");
   // remove the nav- prefix
   clickedId = clickedId.replace(/^nav-/, "");
   // hide all content
   $(".content > div").hide();
   // show the current selected one
   $(".content > div#"+clickedId).show();
   // add filed class to all the nav li's
   $(".nav ul li").addClass("filed");
   // remove filed from clicked li
   $(this).removeClass("filed");
});

CSS

.content > div {
    display: none;
}
.content > div:target {
    display: block;
}

HTML

<div class="nav">
    <ul>
        <li id="nav-main"><a href="#main">Main</a></li>
...

菜单单击以显示具有相同ID的div：变量范围问题？

3 个答案: