ブートストラップのnavをアクティブにするnav navbar-nav

Question

<!-- 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 --> 

ユーザーがクリックするたびに選択されたliタグをアクティブにしようとしています。アクティブタグとして選択する必要があります。私は以下のコードを試しましたが、それは動作しません。私はまだ非常にjavascriptに新しいです。

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

Answer 1

あなたに感謝助けてくださいことは

liは、要素セレクタないクラスセレクタ

$(".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>

希望でこのコードを試してみてくださいこれは役に立ちます！