0

問題は、別のリンクをクリックすると、前の h2 がまだ青であるということです。h2 がデフォルトの色である黒に戻り、リンクに関連付けられている新しい h2 が青になるようにしたいのです。うまくいくと思ったこのif文を使ってみました。

リンクがクリックされると、h2 要素の色がチェックされ、青であるかどうかが確認されます。青の場合は、デフォルトを模倣するために黒に変更する必要があります。h2 が青色でない場合は、関連する見出し h2 を青色に変更する必要がある else ステートメントに進みます。変数「id」には、h2 の id と同じ値であるリンクの href が格納されます。

    $("aside a").click(function(){

    if($("h2").css("color", "rgb(0,0,255)")){
        $("h2").css({"color" : "black"});
    }else{
    id = $(this).attr("href");
    $(id).css({"color" : "blue", "fontSize" : "150%"});
}
});

ブラウザで実行するコードを取得しました。結果には、ページの左側に、h2s から複製されたリンクのリストが表示されます。しかし、Jsfidle で実行することはできません。しかし、これが私が持っているすべてのコードです.jsfiddleで実行されていないのに、htmlスクリプトタグなどを使用してブラウザで実行される理由を教えてください .Jsfiddle

主な問題に戻りますが、if ステートメントが機能しない理由を知りたいです。h2 が青の場合、色を黒に設定する必要があります。そうでない場合は、関連する h2 を青に変更する必要があります。別のリンクをクリックすると、関連する h2 が青に変更され、他のすべての h2 はデフォルトの黒になるはずです。色が変わらないのはなぜですか？

js フィドルは機能しませんが、すべての css および javascript 情報が含まれています。html セクションには html タグと script タグがありません。これは、jsfiddle に入れるべきではないと言われたためです。

より良いjsFiddle

4

2 に答える 2

1

まず、外観を定義するためのクラスをいくつか追加します

h2 {
    color: black;
    font-size: 120%;
}
h2.active {
    color: blue;
    font-size: 150%;
}

次に、クリックハンドラーを介してこれらのクラスを切り替えるだけです

var headings = $('h2');
$('aside').on('click', 'a', function(e) {
    headings.removeClass('active');
    $(this.hash).addClass('active');
});

アップデート

あなたのコードは少し混乱していたので、いくつか修正する機会を得ました - http://jsfiddle.net/hPvms/5/

主な問題は<a>、見出し自体にターゲティング可能な ID 属性を与えるのではなく、見出しにタグを挿入していたことです。

于 2013-09-03T00:25:46.077 に答える