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

Hey I have the below javascript code with accompanying HTML. I am trying to get each button when clicked to change the text color to blue and then when the next button is clicked it changes text of the previously clicked button back to green. basically only the most recently clicked button has blue text. I have tried this code but with this it changes all button text to blue on the first button click. Any help is appreciated. Javascript, HTML, and CSS below.

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

Where am I failing?

我哪里失败了?

3 个解决方案

#1

Try using JavaScript to change the classes then you only need one class to determine which one is clicked.

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

Here is an example:

这是一个例子:

JS:

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

CSS:

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

Here it is in jsfiddle: http://jsfiddle.net/57PBm/

这里是jsfiddle:http://jsfiddle.net/57PBm/

EDIT: This solution uses JQuery which will I would definitely suggest using if you are not already

编辑:这个解决方案使用JQuery,如果你还没有我肯定会建议使用

#2

Rewrite JS code to:

将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';
}

and each button to:

和每个按钮:

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

You don't need to set up 5 CSS classes for the same thing.

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

#3

You are changing every element to a clicked class. Just pass in a number to the function that identifies which button to color blue, then color that one blue and all the others green via JS.

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

#1