javascript - 如何设置导航栏的事件状态？

Question

我尝试了多种代码来在导航栏菜单链接上设置事件状态，但它们都不起作用。最后我找到了一个有效的 bootply 链接:http://bootply.com/70331 ，但它在我的菜单上不起作用。这是我的导航栏:

     <div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="{{ URL::to('news/index') }}">emiAAC</a>

      @include('common.menu_addition')
      @include('common.view_special')

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
        <ul class="nav">
          <li><a href="{{ URL::to('news/index') }}"><i class="icon-list-alt"></i> News</a></li>
           <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-globe"></i> Community <b class="caret"></b></a>
             <ul class="dropdown-menu">
               <li><a href="{{ URL::to('characters/search') }}">Characters</a></li>
               <li><a href="{{ URL::to('online') }}">Online list</a></li>
               <li><a href="{{ URL::to('highscores') }}">Highscores</a></li>
               <li class="divider"></li>
               <li class="nav-header">NOT DONE</li>
               <li><a href="#">Forum</a></li>
               <li><a href="#">Gallery</a></li>
               <li class="divider"></li>
               <li><a href="#">Houses</a></li>
               <li><a href="#">Guilds</a></li>
               <li><a href="#">Guild Wars</a></li>
               <li><a href="#">Live casts</a></li>
             </ul>
          </li>
             <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-book"></i> Library <b class="caret"></b></a>
             <ul class="dropdown-menu">
               <li class="nav-header">NOT DONE</li>
               <li><a href="#">Exp. stages</a></li>
               <li><a href="#">Monsters</a></li>
               <li><a href="#">Quests</a></li>
               <li><a href="#">Spells</a></li>
             </ul>
          </li>
             <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-info-sign"></i> Help <b class="caret"></b></a>
             <ul class="dropdown-menu">
               <li class="nav-header">NOT DONE</li>
               <li><a href="#">Rules</a></li>
               <li><a href="#">Support</a></li>
             </ul>
          </li>


<form id="custom-search-form" class="form-search form-horizontal pull-right" action="{{ URL::action('CharactersController@search') }}" method="get">
    <div class="input-append">
        <input type="text" class="search-query" name="character" placeholder="Character/guild name">
        <button type="submit" class="btn"><i class="icon-search"></i></button>
    </div>
</form>

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

    </div>
  </div>
</div>

Answer 1

这是其中一个示例

<li class="{{ Request::is('characters/*' ) ? 'active' : '' }}"><a href="{{ URL::to('characters/search') }}">Characters</a></li>