Bootstrap導航欄刪除活動

Question

我想使用一個包括PHP文件與Bootstrap的導航欄，但我嘗試刪除導航欄中的類「活動」，並在點擊導航按鈕時添加新的「活動」類。

的jquery.js

$(document).ready(function() { 
$(".nav li").click(function() { 
    e.stopImmediatePropagation(); 
    $(".nav li").removeClass('active'); 
    $(this).addClass('active');  
}); 
} 

navbar.php（它被包含在主頁）

<nav role="navigation" class="navbar navbar-inverse"> 
<div class="container" id="navfluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Gestor de Férias</a> 
    </div> 

    <div class="collapse navbar-collapse" id="navigationbar"> 
     <ul class="nav navbar-nav "> 
      <li class="active"><a href="/gestor/">Inicio</a></li> 
      <li><a href="form.html">Informações</a></li> 
      <li><a href="propostas.php">Propostas</a></li> 
      <li><a href="carousel.html">Contacte-nos</a></li> 

     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <!-- <li> 
       <form class="navbar-form" role="search"> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></button> 
         </div> 
        </div> 
       </form> 
      </li> --> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> &nbsp;Perfil <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Editar informações</a></li> 
     <li><a href="#">Mudar de grupo</a></li> 
     <li><a href="#">Alterar Password</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Sair</a></li> 
     </ul> 
    </li> 
     </ul>       
    </div> 

</div> 

Answer 1

您正在尋找這樣的事情？請參閱jsfiddle。由於某些原因，它在代碼編輯器堆棧溢出中不起作用。

https://jsfiddle.net/r2muLxa0/2/

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 


<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<nav role="navigation" class="navbar navbar-inverse"> 
<div class="container" id="navfluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Gestor de Férias</a> 
    </div> 

    <div class="collapse navbar-collapse" id="navigationbar"> 
     <ul class="nav navbar-nav navbar-main"> 
      <li><a href="#/">Inicio</a></li> 
      <li><a href="#">Informações</a></li> 
      <li><a href="#">Propostas</a></li> 
      <li><a href="#">Contacte-nos</a></li> 

     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <!-- <li> 
       <form class="navbar-form" role="search"> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
         <div class="input-group-btn"> 
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></button> 
         </div> 
        </div> 
       </form> 
      </li> --> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> &nbsp;Perfil <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li><a href="#">Editar informações</a></li> 
     <li><a href="#">Mudar de grupo</a></li> 
     <li><a href="#">Alterar Password</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Sair</a></li> 
     </ul> 
    </li> 
     </ul>       
    </div> 

</div><script> 

    $(".navbar-main li").click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

</script>