Question

我不理解Twitter Bootstrap如何为导航执行活动链接。如果我有这样的常规导航如何根据点击的链接保持活动状态？请看这里http://getbootstrap.com/examples/navbar-static-top/ 右侧的活动链接有效。怎么样？

<!-- Navigation Start --> 
<nav class ="navbar-custom navbar-default" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Navigation ein- /ausblenden</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

        <a class="navbar-brand" href="index.php"><img  src="usr/bootstrap/img/logo.jpg" alt=""></a>

    </div><!-- /.navbar-header -->

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">Home</a></li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Produkte <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="link01.php">link01</a></li>
            <li><a href="link02.php">link02</a></li>
            <li><a href="link03.php">link03</a></li>
          </ul>
        </li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Service <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="link04.php">link04</a></li>
          </ul>
        </li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Unternehmen <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="link05.php">link05</a></li>
          </ul>
        </li>

        <li><a href="kontakt.php">Kontakt</a></li>
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

Answer 1

// Active Link
$(document).ready(function () {

    var uri = String(window.location.href).replace(/#/, "");

    $("#navbar ul li a").filter(function () {
        return (this.href === uri || uri.substr(0, this.href.length + 1) === this.href + "?");
    }).addClass('active');

});

导航的活动链接

1 个答案: