Javascript：单击更改按钮文本颜色答案

【问题标题】：Javascript: on click change button text colorJavascript：单击更改按钮文本颜色
【发布时间】：2013-01-28 12:10:15
【问题描述】：

嘿，我有以下带有 HTML 的 javascript 代码。我试图在单击以将文本颜色更改为蓝色时获取每个按钮，然后当单击下一个按钮时，它将先前单击的按钮的文本更改回绿色。基本上只有最近点击的按钮有蓝色文字。我已经尝试过这段代码，但是在第一次单击按钮时，它会将所有按钮文本更改为蓝色。任何帮助表示赞赏。 Javascript、HTML 和 CSS 如下。

function swapIphoneImage( tmpIPhoneImage ) {
    var el = document.getElementById('my-link');
    var el1 = document.getElementById('my-link1');
    var el2 = document.getElementById('my-link2');
    var el3 = document.getElementById('my-link3');
    var el4 = document.getElementById('my-link4');

    var iphoneImage = document.getElementById('iphoneImage');
    iphoneImage.src = tmpIPhoneImage;
    el.className = 'clicked-class';
    el1.className = 'clicked-class1';
    el2.className = 'clicked-class2';
    el3.className = 'clicked-class3';
    el4.className = 'clicked-class4';

}

html

<ul class="features">
    <li><a id="my-link"  href="javascript:swapIphoneImage('wscalendarws.png');" title="">HaPPPs Calendar</a></li>
    <li><a id="my-link1"  href="javascript:swapIphoneImage('wsweekendws.png');" title="">Weekend Events</a></li>
    <li><a id="my-link2"  href="javascript:swapIphoneImage('wsfollowingws.png');" title="">Places & People</a></li>
    <li><a id="my-link3"  href="javascript:swapIphoneImage('wstemplateviewws.png');" title="">Customize Events</a></li>
    <li><a id="my-link4"  href="javascript:swapIphoneImage('wscheckinws.png');" title="">Interaction</a></li>
</ul>

css

a#my-link.clicked-class {
    color: #71a1ff !important;
}
a#my-link1.clicked-class1 {
    color: #71a1ff !important;
}
a#my-link2.clicked-class2 {
    color: #71a1ff !important;
}
a#my-link3.clicked-class3 {
    color: #71a1ff !important;
}
a#my-link4.clicked-class4 {
    color: #71a1ff !important;
}

我哪里失败了？

【问题讨论】：

为什么你有 5 个不同的类，而你似乎只需要两个：“点击”和“未点击”。这让你自己的生活更加艰难......
是的，我认为我让自己很难受，但我尝试了两个课程并且结果相同。
查看stackoverflow.com/questions/1151161/…

标签： javascript html css

【解决方案1】：

尝试使用 JavaScript 更改类，然后您只需要一个类来确定哪个类被点击。

这是一个例子：

JS：

   $("UL.features LI A").click(function(){
      $("UL.features LI A").removeClass('clicked');
      $(this).addClass('clicked');
   });

CSS：

A.clicked {
    color:#71a1ff !important;
}

在 jsfiddle 中： http://jsfiddle.net/57PBm/

编辑：此解决方案使用 JQuery，如果您还没有，我肯定会建议您使用

【讨论】：

我应该在我的文件中的哪里添加 javascript？我尝试将其添加到头部的其他 javascript 函数之上，但没有骰子，在下面尝试过，什么也没有。
没关系，我明白了。谢谢瑞安，这是完美的解决方案

【解决方案2】：

将JS代码重写为：

function swapIphoneImage( elThis, tmpIPhoneImage ) {
    var el = document.getElementByClassName('clicked-class');

    var iphoneImage = document.getElementById('iphoneImage');
    iphoneImage.src = tmpIPhoneImage;

    el.className = '';
    elThis.className = 'clicked-class';
}

每个按钮：

<li><a id="my-link" href="javascript:swapIphoneImage(this, 'wscalendarws.png');" title="">HaPPPs Calendar</a></li>

您不需要为同一事物设置 5 个 CSS 类。

【讨论】：

【解决方案3】：

您正在将每个元素更改为单击的类。只需将一个数字传递给函数，该函数识别哪个按钮将蓝色着色，然后通过 JS 将一个蓝色和所有其他颜色着色为绿色。

【讨论】：