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 tabs -->
<ul class="nav nav-tabs" id="nav">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#about" data-toggle="tab">About</a></li>
  <li><a href="#contact" data-toggle="tab">Contact</a></li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">This is home</div>
  <div class="tab-pane" id="about">This is about</div>
  <div class="tab-pane" id="contact">This is contact</div>
</div>

<script type="text/javascript" src="link_to_jquery"></script>
<script type="text/javascript" src="link_to_bootstrap.min.js"></script>

以下是实时预览：http://jsfiddle.net/v64NR/

Answer 2

试试这个：

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

bootstrap动态导航活动类

2 个答案: