开发者问题收集

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

2013-02-13
2042
javascript html css

嘿，我有以下 javascript 代码和附带的 HTML。我试图让每个按钮在被点击时将文本颜色更改为蓝色，然后在单击下一个按钮时将先前单击的按钮的文本更改回绿色。基本上只有最近单击的按钮有蓝色文本。我试过此代码，但使用此代码，它会在第一次单击按钮时将所有按钮文本更改为蓝色。任何帮助都非常感谢。以下是 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个回答

尝试使用 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，如果您还没有使用过，我强烈建议您使用。

Ryan Erickson
2013-02-13

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

tomis
2013-02-13

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

ameed
2013-02-13