如何使用Jquery / Javascript添加和刪除活動類以在li內錨定標簽

Question

我需要一個幫助。 我有多個li值，單擊任何值並使用Jquery / Javascript從其他值中刪除時都需要添加活動類。我在下面解釋我的代碼。

<ul id="ulCategory">
   <li><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> 
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li>    
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li>    

</ul>

我的active課在下面給出。

.active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;}

在這里，我需要用戶單擊一個僅會保持活動狀態的值，而另一個將不具有活動狀態的值。請幫助我。

Answer 1

檢查以下代碼段

 $(document).ready(function(){ $("#ulCategory li").on('click', function(){ $(this).siblings().removeClass('active'); $(this).addClass('active') }) }) function savesubcat(){ return null } 

 .active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="ulCategory"> <li><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> <li><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li> <li><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li> </ul> 

Answer 2

只需將點擊處理程序綁定到相關元素，然后使用.addClass()和.removeClass()方法即可。

另外，也從那里調用savesubcat()函數，而不要使用內聯onclick=屬性。

 var anchors = $("#ulCategory li a").click(function() { //savesubcat() $(this).addClass("active") anchors.not(this).removeClass("active") }) 

 .active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="ulCategory"> <li><a href='javascript:void(0)'>ABC</li> <li><a href='javascript:void(0)'>ABF</li> <li><a href='javascript:void(0)'>ABK</li> </ul> 

將JS放在正文的末尾，和/或將其包裝在准備好文檔的處理程序中。

（我假設savesubcat()函數不會導致頁面導航或刷新，因為如果這樣做，則將清除刷新之前設置的任何類。）

Answer 3

嘗試這個：

<ul id="ulCategory">
  <li><a href="javascript:void(0)" class="subcategory">ABC</li> 
  <li><a href="javascript:void(0)" class="subcategory">ABF</li>    
  <li><a href="javascript:void(0)" class="subcategory">ABK</li>
</ul>

jQuery：

$(".subcategory").click(function() {
  $(this).addClass("active").not(this).removeClass("active");
});

Answer 4

 $("#ulCategory a").click(function() { $(this).addClass("active") $("a").not(this).removeClass("active") }) 

 .active { text-align: left; color: #fff; background-color: #ffbb00; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="ulCategory"> <li><a href='#'>ABC</a></li> <li><a href='#'>ABF</a></li> <li><a href='#'>ABK</a></li> </ul> 

1. 使用addClass()和removeClass()與not()
2. 在href中使用#

Answer 5

您可以如下使用addClass（）和removeClass（）

HTML：

<ul id="ulCategory">
   <li><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> 
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li>    
<li><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li>    

</ul> 

jQuery的：

 $("#ulCategory>li").click(function(){
   $("#ulCategory>li").removeClass("active");
   $(this).addClass("active");
})

此處演示

Answer 6

在函數調用中與this元素一起使用

 function savesubcat(that){ $('#ulCategory li a').removeClass('active') $(that).addClass('active') } 

 .active { text-align: left; color: #fff; background-color: #ffbb00; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="ulCategory"> <li><a href='javascript:void(0)' onclick='savesubcat(this)'>ABC</li> <li><a href='javascript:void(0)' onclick='savesubcat(this)'>ABF</li> <li><a href='javascript:void(0)' onclick='savesubcat(this)'>ABK</li> </ul> 

Answer 7

只需將div添加到“ ul”標簽中，然后在其上寫入onclick事件即可。請嘗試以下代碼

//HTML   
 <div id="list_div">
      <ul id="ulCategory">
       <li><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> 
       <li><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li>    
      <li><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li>    
     </ul>
    </div>


//JS
     $(document).on("click","#list_div a",function() {   
           $(this).parent().addClass('active').siblings().removeClass('active');
        });

Answer 8

 $('.abc').click(function () { $('.abc').removeClass('active'); $(this).addClass('active'); }); 

 .active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;} 

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> </head> <body> <div> <ul id="ulCategory"> <li class="abc active"><a href='javascript:void(0)' onclick='savesubcat()'>ABC</li> <li class="abc"><a href='javascript:void(0)' onclick='savesubcat()'>ABF</li> <li class="abc"><a href='javascript:void(0)' onclick='savesubcat()'>ABK</li> </ul> </div> </body> </html> 

Answer 9

您可以使用siblings方法。

siblings方法獲取匹配元素集合中每個元素的兄弟姐妹，可以選擇由選擇器過濾。

 $("ul li").click(function() { $(this).addClass('active').andSelf().siblings().removeClass(); }); 

 .active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="ulCategory"> <li><a href="javascript:void(0)" class="subcategory">ABC</li> <li><a href="javascript:void(0)" class="subcategory">ABF</li> <li><a href="javascript:void(0)" class="subcategory">ABK</li> </ul> 

Answer 10

您可以嘗試這樣的事情

  $('ul li a').click(function() {
      $(this).parent().siblings().children().removeClass( "active" );
      $(this).addClass( "active" ); 
    });

 $('ul li a').click(function() { $(this).parent().siblings().children().removeClass( "active" ); $(this).addClass( "active" ); }); 

 .active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="ulCategory"> <li><a href='javascript:void(0)' onclick=''>ABC</li> <li><a href='javascript:void(0)' onclick=''>ABF</li> <li><a href='javascript:void(0)' onclick=''>ABK</li> </ul> 

Answer 11

 $(document).ready(function(){ $('#ulCategory li a').click(function(){ $('#ulCategory li a').removeClass("active") $(this).toggleClass("active"); }); }); 

 .active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="ulCategory"> <li><a>ABC</a></li> <li><a>ABF</a></li> <li><a>ABK</a></li> </ul>