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

Question

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.

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?

Answer 1

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

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/

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

Answer 2

Rewrite JS code to:

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.

Answer 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.