我需要一个帮助。我有多个<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在这里我需要用户点击一个只保持活动状态而其他人没有活动课程的值。请帮助我。
答案 0 :(得分：4)
检查以下代码段
$(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>
答案 1 :(得分：1)
只需将点击处理程序绑定到相关元素，然后使用.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()函数不会导致页面导航或刷新，因为如果确实如此，那么在之前设置的任何类都将被清除。 ）
答案 2 :(得分：0)
试试这个：
<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");
});
答案 3 :(得分：0)
$("#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>
addClass()和removeClass()与not() # 答案 4 :(得分：0)
您可以使用 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
答案 5 :(得分：0)
在函数调用中使用 $("#ulCategory>li").click(function(){
$("#ulCategory>li").removeClass("active");
$(this).addClass("active");
})
元素
thisfunction savesubcat(that){
$('#ulCategory li a').removeClass('active')
$(that).addClass('active')
}.active {
text-align: left;
color: #fff;
background-color: #ffbb00;
text-decoration: none;
}
答案 6 :(得分：0)
只需将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');
});
答案 7 :(得分：0)
$('.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>
答案 8 :(得分：0)
您可以使用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>
答案 9 :(得分：0)
您可以尝试这样的事情
$('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>
答案 10 :(得分：0)
$(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>