2

我是 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/

提前致谢！

4

3 回答 3

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

演示小提琴

于 2013-07-30T18:12:50.097 回答
0

您需要唯一的 ID，这就是 ID 的意义所在。

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

菜单项的 ID=page13
要显示的内容 div 的 ID=content-page13

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

于 2013-07-30T17:50:54.107 回答
0

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

我使用“nav-ID_OF_DIV”作为 li（菜单 ID），在 JavaScript 中使用正则表达式替换 /^nav-/ 删除 id 的“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>
...
于 2013-07-30T18:01:56.623 回答