2017-08-19 3 views
0
<!-- BEGIN HEADER MENU --> 
      <div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="dropdown dropdown-fw dropdown-fw-disabled active open selected"> 
         <a href="javascript:;" class="text-uppercase"> 
          <i class="icon-home"></i> Home </a> 
         <ul class="dropdown-menu dropdown-menu-fw"> 
          <li class="active"> 
           <a href="{{ url('/externalphotoviewer') }}"> 
            <i class="icon-bar-chart"></i> View Photo </a> 
          </li> 
          <li> 
           <a href="{{ url('about') }}"> 
            <i class="icon-bulb"></i> About </a> 
          </li> 
          <li> 
           <a href="{{ url('contact') }}"> 
            <i class="icon-graph"></i> Contact </a> 
          </li> 
         </ul> 
        </li> 
        <li class="dropdown dropdown-fw dropdown-fw-disabled "> 
         <a href="javascript:;" class="text-uppercase"> 
          <i class="icon-home"></i> Upload </a> 
         <ul class="dropdown-menu dropdown-menu-fw"> 
          <li class="active"> 
           <a href="{{ url('picture/create') }}"> 
            <i class="icon-bar-chart"></i> Upload Photo </a> 
          </li> 
          <li> 
           <a href="{{ url('about') }}"> 
            <i class="icon-bulb"></i> View Photo List </a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <!-- END HEADER MENU --> 

Ich versuche, das ausgewählte li-Tag aktiv zu machen, wenn ein Benutzer darauf klickt. Es sollte als aktives Tag ausgewählt werden. Ich habe den folgenden Code ausprobiert, aber es funktioniert nicht. Ich bin immer noch sehr neu in Javascript. bitte helfen dankeAktivieren Sie das Kontrollkästchen für bootstrap nav navbar-nav

<script> 
      $(".li").on("click", function(){ 
      $(".li").find(".active").removeClass("active"); 
      $(this).parent().addClass("active"); 
     }); 
     </script> 
+0

Fügen Sie ein funktionierendes Beispiel – Dekel

Antwort

1

diesen Code Versuchen

li ist Elementselektoreinrichtung kein Klassenauswahl

$(".dropdown-menu-fw li").on("click", function(e) { 
    e.preventDefault();//Remove this line to route to links 
    e.stopPropagation(); 
    $(this).parents('.open').find("li").removeClass("active"); 
    $(this).addClass("active"); 
    }); 

$(".dropdown-menu-fw li").on("click", function(e) { 
 
    e.preventDefault();//Remove this line to route to links 
 
    e.stopPropagation(); 
 
    $(this).parents('.open').find("li").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
    
 
$(".dropdown-fw").on("click",function(){ 
 
    $(".dropdown-fw").removeClass("open selected"); 
 
    $(this).addClass("open selected"); 
 
})
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css'); 
 
.collapse { 
 
    display: block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="dropdown dropdown-fw dropdown-fw-disabled active open selected"> 
 
         <a href="javascript:;" class="text-uppercase"> 
 
          <i class="icon-home"></i> Home </a> 
 
         <ul class="dropdown-menu dropdown-menu-fw"> 
 
          <li class="active"> 
 
           <a href="{{ url('/externalphotoviewer') }}"> 
 
            <i class="icon-bar-chart"></i> View Photo </a> 
 
          </li> 
 
          <li> 
 
           <a href="{{ url('about') }}"> 
 
            <i class="icon-bulb"></i> About </a> 
 
          </li> 
 
          <li> 
 
           <a href="{{ url('contact') }}"> 
 
            <i class="icon-graph"></i> Contact </a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li class="dropdown dropdown-fw dropdown-fw-disabled "> 
 
         <a href="javascript:;" class="text-uppercase"> 
 
          <i class="icon-home"></i> Upload </a> 
 
         <ul class="dropdown-menu dropdown-menu-fw"> 
 
          <li class="active"> 
 
           <a href="{{ url('picture/create') }}"> 
 
            <i class="icon-bar-chart"></i> Upload Photo </a> 
 
          </li> 
 
          <li> 
 
           <a href="{{ url('about') }}"> 
 
            <i class="icon-bulb"></i> View Photo List </a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div>

Hoffnung das hilft!

+0

Hallo danke für Ihre Hilfe. Es macht die Tags aktiv, wenn ich darauf klicke. Es führt jedoch nicht zu den Links, zu denen die Registerkarten führen sollen. Wie behebe ich das? danke – Desmond

+0

entfernen Sie einfach 'e.preventDefault();' von oben code.Its verhindert Links vom Routing – Amal

+0

Ich entfernt e.preventDefault() wie Sie vorgeschlagen. Aber dann geht es wieder zu demselben Verhalten wie vorher und es funktioniert nicht mehr. Können Sie versuchen, externe Testlinks in Ihren Code einzufügen und zu sehen, ob Sie die gleichen Probleme bekommen? danke – Desmond

Verwandte Themen