jquery - Bootstrap 对齐导航栏

Question

所以我用这段代码做了一个合理的导航栏:

         <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>

还有这段js代码:

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

但是当我点击列表中的元素时，它们是灰色的，但周围没有这条线，有人知道如何解决吗？最好的问候 Azoni

编辑:它应该看起来像左边的但看起来像右边的:http://imgur.com/a/2RSvJ

Answer 1

您正在尝试在具有类 .nav 的元素内选择一个 ul，它本身就是 ul。此外，您将类添加到错误的元素，li 的父元素是 ul 而不是 li。此外，您可以直接将其从所有对象中删除，而不是首先找到唯一的事件对象。

即这样做:

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