Azoni Azoni - 1 month ago 23
jQuery Question

Bootstrap Justified Nav Bar

so I made a justified navigation bar with this code:

<nav>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
</ul>
</nav>


And this js Code:

$(".nav ul li").on("click", function(){
$(".ul").find(".active").removeClass("active");
$(this).parent().addClass("active");
});


But when I click on the Items in the list, they are greyscaled but there isnt this line around them, do anyone know how to fix it?
Best regards Azoni

Edit: It should look like the left one but looks like the right one:http://imgur.com/a/2RSvJ

Answer

You are trying to select an ul inside an element with class .nav which itself is the ul. In addition, you're adding the class to the wrong element, the parent of the li which is the ul instead of the li. Moreover, you can just remove it from all instead of first finding the only active one.

I.e. do this:

$(".nav li").on("click", function(){
   $(".nav li").removeClass("active");
   $(this).addClass("active");
});
Comments