jqueryを使用してリストアイテムにクラスをアクティブに適用します

Question

jqueryを使用してliをliでアクティブとして追加する方法。私はそれについて何の考えも持っていません。私は何度も試してみましたが、期待される結果を得ていません。私はここにサンプルコードを書いています、私のコードをチェックし、私に何か他のことを教えてください。

<ul class="sidebar-menu" data-widget="tree"> 
     <li class="treeview"> 
      <a href="#"> 
      <i class="fa fa-table"></i> <span>Tables</span> 
      <span class="pull-right-container"> 
       <i class="fa fa-angle-left pull-right"></i> 
      </span> 
      </a> 
      <ul class="treeview-menu"> 
      <li><a href="simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li> 
      <li><a href="data.html"><i class="fa fa-circle-o"></i> Data tables</a></li> 
      </ul> 
     </li>   
     </ul> 

liをアクティブにする方法。このような出力を得る必要があります。私の必要をしてください。あなたは、あなたが）（イベントメソッドをクリックして使用し、addClassを適用することができ、メニューをクリックした後に追加したい場合は

<ul class="sidebar-menu" data-widget="tree"> 
<li class="treeview active"> 
    <a href="#"> 
    <i class="fa fa-table"></i> <span>Tables</span> 
    <span class="pull-right-container"> 
     <i class="fa fa-angle-left pull-right"></i> 
    </span> 
    </a> 
    <ul class="treeview-menu menu-open"> 
    <li><a href="simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li> 
    <li class="active"><a href="data.html"><i class="fa fa-circle-o"></i> Data tables</a></li> 
    </ul> 
</li> 
</ul> 

Answer 1

あなたはアクティブなクラス

$("treeview-menu").children().eq(1).addClass("selected"); 

を追加するためのaddClass関数を使用することができます。

$('.treeview-menu li').click(function (e) { 
    var clickedMenu = this; 
    $(clickedMenu).addClass("active"); 
}); 

http://dotnet-helpers.com/jquery/addclass-method-jquery/

Answer 2

リンクの下に参照してください

簡単な解決策は以下のとおりです。

$('li').on('click', function(){ 
    $('.active').removeClass(); //removes .active class from currently active li 
    $(this).addClass('active'); //sets this element .active 
}); 

//編集：以下の作業があります。クラスactiveは特に<li>赤色になります。

$('li').on('click', function(){ 
 
     $('.active').removeClass(); //removes .active class from currently active li 
 
     $(this).addClass('active'); //sets this element .active 
 
    });

li { 
 
    cursor: pointer; 
 
} 
 
.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
<li>one</li> 
 
<li>two</li> 
 
<li>three</li> 
 
</ul>