1

ねえ、私は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;
}

私はどこで失敗していますか？

4

3 に答える 3

2

JavaScriptを使用してクラスを変更してみてください。そうすれば、クリックされたクラスを判別するために必要なクラスは1つだけです。

次に例を示します。

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を使用していますが、まだ使用していない場合は必ず使用することをお勧めします

于 2013-02-13T02:07:16.580 に答える
1

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クラスを設定する必要はありません。

于 2013-02-13T02:11:12.553 に答える
0

すべての要素をクリックされたクラスに変更しています。どのボタンを青に着色するかを識別する番号を関数に渡すだけで、JSを介してその1つを青に、他のすべてを緑に着色します。

于 2013-02-13T02:01:59.450 に答える