单击时交换一组元素的 CSS 样式

Question

我找到了一个线程，用 JavaScript 更改元素的类，即沿着我想要的路线，但我不知道如何实现它。

我有一个包含 4 个输入按钮和两种 CSS 样式的页面：“Selected”和“notSelected”。一个按钮最初将被硬编码为“选定”。当用户单击另一个按钮时，我想以编程方式迭代所有按钮（每页上的按钮数量将在 2 到 10 之间），将单击的按钮的类设置为“Selected”，并确保所有其他按钮按钮设置为“notSelected”。

我已经掌握了逻辑，但我以前从未使用过 JavaScript 做过任何事情，所以我对如何做到这一点一无所知。如果有人知道已经存在的教程/代码可以做到这一点，请为我指出正确的方向。

非常感谢！

Answer 1

您可以采用简单的方法并使用像 jQuery 这样的框架来为您完成艰苦的工作

Answer 2

由于您是 JavaScript 新手，这可能有点多，但是您考虑过使用 jquery 吗？看一下toggleClass()： http://api.jquery.com/toggleClass/

Answer 3

您好，刚刚制作了一个快速脚本，希望对您有所帮助。如果您发现脚本有任何问题，请告诉我。

我使用的是焦点事件和输入框，您可以根据需要更改它。

函数 doSelect( obj ){ var
mylist=document.getElementById("formDiv")
var 输入项=
mylist.getElementsByTagName(“输入”);
for (i=0; i < inputItems.length;
我++）{
document.getElementById(inputItems[i].id).className
= "未选择"; document.getElementById(obj.id).className
=“已选择”； }

div 标签内有一个表单标签 id="formDIV"

少量文本类型的输入标签和 onfocus="doSelect(this)"

<正文>

<形式
名称=“测试表格”>
<输入类型=“文本”
名称=“tx1”
id=“文本1”
onfocus="doSelect(this)"/>
<输入类型=“文本”
名称=“tx2”
id=“文本2”
onfocus="doSelect(this)"/>
<输入类型=“文本”
名称=“tx3”
id=“文本3”
onfocus="doSelect(this)"/>
<输入类型=“文本”
名称=“tx4”
id=“文本4”
onfocus="doSelect(this)"/>
<输入类型=“文本”
名称=“tx5”
id=“文本5”
onfocus="doSelect(this)"/>

这应该
帮助。