JS点击添加class，再次点击移除class，并且自身也添加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>
1、首先在html中布局好两个按钮和一个div。
2、接着编写添加class的方法。
3、运行页面以后看到如下图所示的界面。
4、点击添加class按钮就可以看到div中多了样式。
5、接下来在编写移除class样式，如下图所示要的是remove。
6、最后运行界面，点击移除class按钮，class就被移除了。
<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';
}
}
这样就没有空格了
哥们，我又发现一个问题。我如果多个同样的效果，复制一下，点击其中一个，他们全部都改变了。能不能再帮我来个规则循环。让这个可以重复利用，但是又互不冲突！感激不尽。
追答因为目前这个是根据id去找个那个div
你所有的div id都是一样的，那肯定一点就全变了
要实现的话，要给每个div加上不同的id，然后在click事件传入一个参数
//第一个参数是源，第二个参数是目标function doAct(s, t){
var t = document.getElementById(t),
c = s.className;
//以下省略
}
//在a添加事件的时候，指定一下对哪个产生作用
<div class="cont3" id="t1"></div>
<div class="cont3" id="t2"></div>
<div class="cont3" id="t3"></div>
//只对t3产生作用，其他类推
<a class="tb_bottom" href="#" onClick="doAct(this, 't3');">更多</a>追问
这条语句，直接加入上一个JS里面是吗？然后页面上改id。
追答在第一份代码上面改就行，这里这个T就是变量，不是字符串了，没有单引号，你注意一下
本回答被提问者采纳<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>
希望能帮到你！
JS点击添加class,再次点击移除class,并且自身也添加class
1、首先在html中布局好两个按钮和一个div。2、接着编写添加class的方法。3、运行页面以后看到如下图所示的界面。4、点击添加class按钮就可以看到div中多了样式。5、接下来在编写移除class样式，如下图所示要的是remove。6、最后运行界面，点击移除class按钮，class就被移除了。
vue.js怎么实现单击时添加class双击时取消class
toggleClass方法可以实现对某一class进行添加、删除操作。 示例： $('#test').toggleClass('className');上面的代码将会依次为id为test的元素添加\/删除名为className的class，如果test元素存在className，则删除className
...用原生js实现点击子级a标签给父级div添加class再点击就移除class
}else{ pDiv.className=" "; } } \/\/还可以用classList，这种方法更流畅 function test2(ele){ var pDiv=ele.parentNode; if(pDiv.classList.contains("tdiv")){ pDiv.classList.remove("tdiv"); }else{ pDiv.classList.add("tdiv"); } } ...
jquery点击加class在点击移除添加的class
可以使用：$("#but").removeAttr("class");和$("#but").attr("class","but_test");来对标签进行元素的添加和删除。为了直观性的看到结果，首先在css样式中，针对class选择该元素，之后添加相应的样式。接下来，就给该button按钮添加一个点击事件，让它能过自由切换。对该点击事件添加js函数。运行...
js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元 ...
解释：给当前选中的增加边框.addClass('active')给原先选中的取消边框.siblings().removeClass('active')详细如下：.clr:after{clear:both;display:block;overflow:hidden;height:0;content:".";}.clr{zoom:1;}.price{width:100%;}.price a{width:100px;height:40px;line-height:40px;text-align...
js如何鼠标点击一个div删除另一个div的class中的其中一个类名,再点击...
if(cls == "main") $(".main").attr("class", "main red"); else $(".main").attr("class", "main"); }); }); 应该理解对了你的问题：动态添加元素的class名。直接上代码，有问题追问哈。
jq:求助!!\/\/当鼠标点击li给li赋予一个class,当鼠标点击另一个li的时 ...
(function(){ ("#Tab ul > li").click(function(){ (this).addClass("current").siblings().removeClass("current");})}) \/\/给Li一个点击事件，给当前点击的li一个class然后去掉同辈li的class,就这么简单
JS添加删除CLASS
(function(){ \/\/alert(1);('.m_l dl dt').mouseover(function(){ \/\/alert(1);('.m_l dl dt').removeClass("m_1_class2");\/\/清除class (this).addClass("m_1_class2");\/\/添加class }
classList介绍和原生JavaScript实现addClass、removeClass等
原生JavaScript实现addClass、removeClass等操作，利用classList属性，可以方便添加、删除、查询元素的class属性。elementClasses表示element的类属性，长度为0表示未设置或为空。element.classList只读，可通过add()和remove()方法修改。添加指定类值，忽略已存在的类；删除指定类值；按索引返回类值；当只有一个...
JS脚本:jquery 如何动态添加、删除class样式方法介绍
1 $("#btn_3").click(function(){ 2 $("#nm_p").addClass("another"); \/\/ 追加样式3 });后当单击“追加class类”按钮时，p元素样式就会变为斜体，而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值，即"high"和"another"。在CSS中有以下两条规定。1.如果给一个元素添加了...
