0

状況は、A から Z までのインデックスがあり、文字をクリックすると対応する div が表示されるということです。同じ文字をもう一度クリックすると、div が折りたたまれます。

私が達成したいのは、文字を初めてクリックすると、上部の垂直に配置されたインデックスの文字の色が赤に変わるはずです。もう一度クリックすると、赤から黒に戻ります。

私が見つけた解決策は、別の文字がクリックされたときに色をリセットしました。つまり、複数の div がアクティブになり、複数の文字が赤になるはずです。しかし、私はそれを機能させることができませんでした。

私はjavascriptが解決策であることを知っていますが、私は良いJavaコーダーではありません. inner/outerHTML と getElementbyID を試しましたが、すべて失敗しました。

誰かが助けてくれることを願っています。3 文字の短いソリューションで十分です。

コードはhttp://www.webpati.com/index.txtにあります。

前もって感謝します。

4

2 に答える 2

2

追加するだけ

$(this).toggleClass('active');

下部にあるjQueryクリック関数に、次のようなcssルールを追加します。

.slick-toggle { color: black; }
.slick-toggle.active { color: red; }

jsfiddle

于 2012-05-23T21:29:50.493 に答える
0

回答ありがとうございます。javascript の最後にコード (以下の太字) を入れたところ、うまくいきました。

jQuery("a.slick-toggle").click(function () {

 if($(this).children("span").text() == "") {

    $(this).children("span").text('');

      } else {

        $(this).children("span").text('Show');

      } 

var id = jQuery(this).attr('id');

jQuery("#slickbox" + id).fadeToggle({

speed:200,easing : "swing"})


**$(this).toggleClass('active');**

return false;

});
于 2012-05-24T17:11:41.937 に答える