Question

我正在尝试在活动div上激活我的导航，以下示例显示并隐藏正确的div但不将活动类添加到链接：

HTML

<div class="list-group" id="admin-list"> 
<a href="#add-user" data-toggle="tab" class="list-group-item"> Add a user </a> 
</div>

JS

$("#nav li a").on("click", navigation("#nav li"));

$("#admin-list a").on("click", navigation("#admin-list a"));

var foo = function(navigation) {
    $(navigation).removeClass("active"); //Remove any previously "active" li
    $("#home, #about, #contact", "#add-user").hide(); //Hide all "pages"
    $($(this).prop("href")).show(); //Show only the current target
    $(this).addClass("active"); //Set click a as active
};

Answer 1

我认为你的问题在于

($(this).prop("href")).show();

因为那不是有效的选择器。如果您只是想获取当前链接，请像这样引用它：

$(this).show();

Answer 2

我做了两件事......我评论了prop href show line，并删除了.closest，我发现现在正在将active作为类添加到a标签中。

这是我使用的小提琴：

http://jsfiddle.net/LWAmE/

（我没有添加bootstrap，因为我不需要为了测试代码而来）

$("#admin-list a").on("click", function(f){
f.preventDefault();

$("#admin-list a").removeClass("active"); //Remove any previously "active" a
$("#home, #about, #contact, #add-user").hide(); //Hide all "pages"
//$($(this).prop("href")).show(); //Show only the current target
$(this).addClass("active"); //Set click a as active
});

bootstrap导航活动链接无法正常工作

2 个答案: