Javascript：点击更改按钮文字颜色

Question

嘿，我有以下带有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;
}

我哪里失败了？

Answer 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，如果你还没有我肯定会建议使用

Answer 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类。

Answer 3

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