jquery - Bootstrap 动态导航事件类

Question

我有这个导航栏:

    <ul class="nav navbar-nav" id="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>

我正在使用 Twitter Bootstrap 。我需要为每个导航元素显示一个 div 并隐藏其余元素，并在正确的时间使当前菜单项处于事件状态，而所有其他项都处于非事件状态。是否有一些代码可以执行此操作？

Answer 1

试试这个:

$("#nav li a").on("click", function(e){
    e.preventDefault();

    $("#nav li").removeClass("active"); //Remove any previously "active" li
    $("#home, #about, #contact").hide(); //Hide all "pages"
    $($(this).prop("href")).show(); //Show only the current target
    $(this).closest("li").addClass("active"); //Set click li as active
});