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

Question

我找到了一个线程Change an element's class with JavaScript，这与我的目标一致，但我不知道如何实现它。

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

我已经掌握了逻辑，但我之前从未做过任何关于JavaScript的事情，所以我对如何做到这一点没有任何想法。如果有人知道已经在那里执行的教程/代码，请指出我正确的方向。

非常感谢！

Answer 1

您可以轻松使用jQuery这样的框架为您做出艰苦的工作

Answer 2

由于您不熟悉JavaScript，这可能有点多，但您是否考虑过使用jquery？看看toggleClass（）：http://api.jquery.com/toggleClass/

Answer 3

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

我正在使用焦点事件和输入框，您可以根据需要进行更改。

  

function doSelect（obj）{var   MYLIST =的document.getElementById（ “formDiv”）     var inputItems =   mylist.getElementsByTagName（ “输入”）;     for（i = 0; i＆lt; inputItems.length;   我++）{         的document.getElementById（inputItems [I] .ID）.className   =“未选中”; } document.getElementById（obj.id）.className   =“选中”; }

在div标签id =“formDIV”

中有一个表单标签

几乎没有类型为text和onfocus的输入标签=“doSelect（this）”

  

＆LT;身体GT; ＆LT; DIV   ID = “formDiv” ＆GT; ＆LT;形式   NAME = “TESTFORM” ＆GT;     ＆lt; input type =“text”   NAME = “TX1”   ID = “文本1”   的onfocus = “的doSelect（这）”/＆GT;     ＆lt; input type =“text”   NAME = “TX2”   ID = “text2” 中   的onfocus = “的doSelect（这）”/＆GT;     ＆lt; input type =“text”   NAME = “TX3”   ID = “text3” 中   的onfocus = “的doSelect（这）”/＆GT;     ＆lt; input type =“text”   NAME = “TX4”   ID = “text4” 中   的onfocus = “的doSelect（这）”/＆GT;     ＆lt; input type =“text”   NAME = “TX5”   ID = “text5”   的onfocus = “的doSelect（这）”/＆GT;   ＆LT; /形式＆GT; ＆LT; / DIV＆GT;   ＆LT; /体＆GT;

这应该  帮助