用js写有六个按钮点击按钮会变色然后其他按钮恢复原来的颜色

Posted 2023-03-31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js写有六个按钮点击按钮会变色然后其他按钮恢复原来的颜色相关的知识，希望对你有一定的参考价值。

用js写有六个按钮点击按钮会变色然后其他按钮恢复原来的颜色类似于一个单选在线等急谢谢附上代码谢谢

可以使用js的css方法实现点击按钮会变色，然后其他按钮恢复原来的颜色。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件，js文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下js代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要点击按钮会变色，然后其他按钮恢复原来的颜色效果。

参考技术A <!DOCTYPE html>
<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会更简单点

追问

我的事button按钮 class已经有值啦

优惠商家
第二份半价

追答$('.btn').on('click',function()
$(this).addClass('on').siblings().removeClass('on');
)
//思路是一样的，给这个.btn 加一个类名为on的样式，点击button时候给button加class为'on',
//同时移除兄弟节点的button的class为'on'的类名

本回答被提问者采纳参考技术B 思路：
先将六个按钮的颜色都回复原来的，
再将点击的按钮变色就可以了。
code：
let inpDomList = document.querySelectorAll('input')；
for(let i = 0;i<inpDomList.length;i++)
inpDomList[i].classList.remove('aaa');

this.classList.add('aaa') 参考技术C 一个全局变量记录被按下的按钮控件对象1设置所有按钮颜色为灰色2所有按钮的鼠标进入事件相同，检测被按下按钮是否为该按钮，不是的话将该按钮的背景色改为深灰3所有按钮的鼠标移出事件相同，检测被按下按钮是否为该按钮，不是的话将按钮的背景色设置为灰色4按钮点击事件，执行方法1，并将触发事件的按钮背景色设为黑色，将全局变量记录被按下的按钮设置为该按钮可使用sender as button 来获取被点击的按钮