如何使用Jquery / Javascript添加和删除活动类以在li中锚定标记

Question

我需要一个帮助。我有多个<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 / Javascript从其他值中删除。我正在解释下面的代码。

active

我的.active {text-align: left; color: #fff; background-color:#ffbb00; text-decoration: none;} 课程如下。

DapperRow

在这里我需要用户点击一个只保持活动状态而其他人没有活动课程的值。请帮助我。

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=属性。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

将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

＆＃13;

＆＃13;

$("#ulCategory a").click(function() {

  $(this).addClass("active")
  $("a").not(this).removeClass("active")
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

1. 将addClass()和removeClass()与not()
一起使用
2. 在href中使用#

Answer 5

您可以使用 addClass() 和 removeClass() ，如下所示

HTML：

import android.support.annotation.NonNull;

public class MyMessageEvent {

    private String mMessage;

    public MyMessageEvent(@NonNull final String message) {
        mMessage = message;
    }

    public String getMessage() {
        return mMessage;
    }

}

<强> JQuery的：

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

<强> DEMO HERE

Answer 6

在函数调用中使用 $("#ulCategory>li").click(function(){ $("#ulCategory>li").removeClass("active"); $(this).addClass("active"); }) 元素

＆＃13;

＆＃13;

this

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

.active {
  color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;