用js写 有六个按钮点击按钮会变色 然后其他按钮恢复原来的颜色
发布网友
发布时间：2022-04-23 13:32
共5个回答
懂视网
时间：2022-05-14 07:11
classList属性的方法：add();remove();toggle();
描述，在一些页面我们需要使用两个按钮来回切换，如图：
我们要使用到add()和remove()方法
html部分:
<p class="login-title"> <a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()">注册</a> <a href="javascript:void(0)" class="mya2" id="myaa" onclick="myonclick1()">登陆</a> </p>
js部分:
css部分:
.login-title{
width:200px;
height:200px;
margin: 0 auto;
background-color:antiquewhite;
}
.mya2{
padding: 0 20px 10px 20px;
color:#FFFFFF;
font-size:22px;
text-decoration:none;
}
.mya1{
padding:0 20px 10px 20px;
color:#7F4A88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7F4A88;
}
.newClassName{
padding:0 20px 10px 20px;
color:#7F4A88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7F4A88;
}
.newClassName1{
padding: 0 20px 10px 20px;
color:#FFFFFF;
font-size:22px;
text-decoration:none;
}
热心网友
时间：2022-05-14 04:19
可以使用js的css方法实现点击按钮会变色，然后其他按钮恢复原来的颜色。
具体步骤如下：
需要准备的材料分别是：电脑、浏览器、ultraedit。
1、在ue编辑器中新建一个空白的html文件，js文件。
2、在ue编辑器中输入以下html代码。
3、在ue编辑器中输入以下js代码。
4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。
5、在浏览器中打开此html文件，可以看到最终想要点击按钮会变色，然后其他按钮恢复原来的颜色效果。
热心网友
时间：2022-05-14 05:37
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
margin:20px;
}
input {
width: 100px;height: 40px;
}
input.on {
background-color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li><input type="button" class="on"></li>
<li><input type="button"></li>
<li><input type="button"></li>
<li><input type="button"></li>
<li><input type="button"></li>
<li><input type="button"></li>
</ul>
</div>
<script>
var list = document.getElementsByTagName('input');
for(let i = 0;i<list.length;i++) {
list[i].addEventListener('click',function() {
for(let i=0;i<list.length;i++) {
list[i].removeAttribute('class');
}
this.setAttribute('class','on')
})
}
</script>
</body>
</html>
//这是原生js写的，用jq会更简单点
优惠商家
第二份半价
追答$('.btn').on('click',function() {
$(this).addClass('on').siblings().removeClass('on');
})
//思路是一样的，给这个.btn 加一个类名为on的样式，点击button时候给button加class为'on',
//同时移除兄弟节点的button的class为'on'的类名
热心网友
时间：2022-05-14 07:11
先将六个按钮的颜色都回复原来的，
再将点击的按钮变色就可以了。
code：
let inpDomList = document.querySelectorAll('input')；
for(let i = 0;i<inpDomList.length;i++){
inpDomList[i].classList.remove('aaa');
}
this.classList.add('aaa')
热心网友
时间：2022-05-14 09:03
