JQuery 点一下就增加class，同时清除其他的class如何做?
<divid="tabs"><ul><li><ahref="#tabs-1">TAB1</a></li><li><ahref="#tabs-2">TAB2</a></li...
<div id="tabs">
<ul>
<li><a href="#tabs-1">TAB1</a></li>
<li><a href="#tabs-2">TAB2</a></li>
<li><a href="#tabs-3">TAB3</a></li>
</ul>
<div id="tabs-1"> TAB1 content</div>
<div id="tabs-2"> TAB2 content</div>
<div id="tabs-3"> TAB3 content</div>
</div>
<script> $(function() { $( "#tabs" ).tabs(); }); </script>
这个其实就是jq官网的tabs方法的html部分和js
但我不想用官方的css，想请教一下，如果把<li>这个CSS做成像CSS的li:hover那样
其实就是想做成当前分类的提示
如果写tab1...就把tab1 的<li>的CSS加上
但如果先点tab1 激活了tab1 css加上了 比如叫做class="ed"
再点tab2 激活了tab2 css做class="ed"
但要如合清空其他tab 的CSS? 展开
<ul>
<li><a href="#tabs-1">TAB1</a></li>
<li><a href="#tabs-2">TAB2</a></li>
<li><a href="#tabs-3">TAB3</a></li>
</ul>
<div id="tabs-1"> TAB1 content</div>
<div id="tabs-2"> TAB2 content</div>
<div id="tabs-3"> TAB3 content</div>
</div>
<script> $(function() { $( "#tabs" ).tabs(); }); </script>
这个其实就是jq官网的tabs方法的html部分和js
但我不想用官方的css，想请教一下，如果把<li>这个CSS做成像CSS的li:hover那样
其实就是想做成当前分类的提示
如果写tab1...就把tab1 的<li>的CSS加上
但如果先点tab1 激活了tab1 css加上了 比如叫做class="ed"
再点tab2 激活了tab2 css做class="ed"
但要如合清空其他tab 的CSS? 展开
4个回答
展开全部
简单的语句：$(".selector").click(function(){ $(this).attr("class","newClass"));
解释：首先给你指定的元素绑定一个click事件，点击就执行增加class，同时清除其他class的操作。attr是jquery一个设置元素属性的方法。通过该方法直接给被点击的元素添加新的class,默认会覆盖掉之前class属性的值。
拓展：attr方法参考 http://www.w3cschool.cn/attributes_attr.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
大概写了个示例代码，供参考：
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery 测试</title>
<style>
.ActiveTab {background-color: #093;}
</style>
<meta http-equiv="content-type" content="text/html" />
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
function ShowTabs(tabElement)
{
$("#tabs").children("div").each(function(index, element){
if(tabElement.id == element.id)
$("#"+element.id).addClass("ActiveTab");
else
$("#"+element.id).removeClass("ActiveTab");
});
}
</script>
</head>
<body>
<div id="tabs">
<div id="tabs-1" onclick="ShowTabs(this)"> TAB1 content </div>
<ul>
<li id="li1"><a href="#tabs-1">TAB1</a></li>
<li id="li2"><a href="#tabs-2">TAB2</a></li>
<li id="li3"><a href="#tabs-3">TAB3</a></li>
</ul>
<div id="tabs-2" onclick="ShowTabs(this)"> TAB2 content</div>
<div id="tabs-3" onclick="ShowTabs(this)"> TAB3 content</div>
</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$("#tabs ul li").click(function(){
$("#tabs ul li").removeClass("ed");
$(this).addClass("ed");
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.attr('class','className')
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
