引导导航活动链接不起作用

Question

I'm trying to make my navigation active on the active div, the following example shows and hides the correct divs but doesn't add the active class to the link:

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

I think your problem lies within

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

Because that is not a valid selector. If you are just trying to get the current link just reference it like this:

$(this).show(); 

Answer 2

There's two things I did... I commented out the prop href show line, and removed the .closest and I'm finding that active is now properly being added as a class to the a tag.

Here's the fiddle I was using:

http://jsfiddle.net/LWAmE/

(I didn't add bootstrap as I didn't need to in order to test the code out)

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