bootstrap navigation active links not working

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