JS点击添加class，再次点击移除class，并且自身也添加class
现在有个问题请教下大家，就是我想让一个a标签触发一个事件，让另外一个div添加一个class号，然后再次点击这个a标签的时候移除class号。（主要是为了实现一个展开效果...
现在有个问题请教下大家，就是我想让一个a标签触发一个事件，让另外一个div添加一个class号，然后再次点击这个a标签的时候移除class号。（主要是为了实现一个展开效果：我是通过class号来控制该div的宽高。）如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="cont3"> 点击更多，给我再添加一个class="Large"。并且更多的那个A标签里面图片class号也添加一个：class="more"，再次点击更多a标签，两个class号都移除！</div>
<a class="tb_bottom" href="#">更多</a>
</body>
</html> 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="cont3"> 点击更多，给我再添加一个class="Large"。并且更多的那个A标签里面图片class号也添加一个：class="more"，再次点击更多a标签，两个class号都移除！</div>
<a class="tb_bottom" href="#">更多</a>
</body>
</html> 展开
4个回答
展开全部
1、首先在html中布局好两个按钮和一个div。
2、接着编写添加class的方法。
3、运行页面以后看到如下图所示的界面。
4、点击添加class按钮就可以看到div中多了样式。
5、接下来在编写移除class样式，如下图所示要的是remove。
6、最后运行界面，点击移除class按钮，class就被移除了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="cont3" id="t"></div>
<a class="tb_bottom" href="#" onClick="doAct(this);">更多</a>
<script>
function doAct(s){
var t = document.getElementById('t'),
c = s.className;
//有more属性
if(c != null && c.indexOf('more') > -1){
s.className = c.replace('more', '');
t.className = t.className.replace('Large', '');
}else{
s.className = c + ' more';
t.className = t.className + ' Large';
}
}
</script>
更多追问追答
追问
very nice ，很赞！！！但是有个小问题，如果我一直点击更多，里面原有class号跟新加的class号之间就会越来越多空格。。。。。这个虽然不影响样式实现，但是代码还是不太美观，能够做到无限次数点击，都是相隔一个空格不。
追答
噗，是我的问题，小改一下
function doAct(s){
var t = document.getElementById('t'),
c = s.className;
//查找 空格more 而非more
if(c != null && c.indexOf(' more') > -1){
//连空格一起替换
s.className = c.replace(' more', '');
t.className = t.className.replace(' Large', '');
}else{
s.className = c + ' more';
t.className = t.className + ' Large';
}
}这样就没有空格了
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(".tb_bottom").click(function(){
if($(".tb_bottom").attr("id")!=1){
$(".cont3").attr("class","cont3 Large");
$(".tb_bottom").attr("class","tb_bottom more");
$(".tb_bottom").attr("id",1);
alert("attr");
}
else{
$(".cont3").removeClass("Large");
$(".tb_bottom").removeClass("more");
$(".tb_bottom").attr("id",0);
alert("css");
}
});
</script>
希望能帮到你！
<script>
$(".tb_bottom").click(function(){
if($(".tb_bottom").attr("id")!=1){
$(".cont3").attr("class","cont3 Large");
$(".tb_bottom").attr("class","tb_bottom more");
$(".tb_bottom").attr("id",1);
alert("attr");
}
else{
$(".cont3").removeClass("Large");
$(".tb_bottom").removeClass("more");
$(".tb_bottom").attr("id",0);
alert("css");
}
});
</script>
希望能帮到你！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery很简单，试试
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
