jquery - クリックするとメニューリンクをハイライト表示するにはどうすればいいですか？

Question

私はリンク付きメニューを持っています。リンクはテーブル内に配置されます。各リンクは<td>に配置されています。アクティブなときに、<td>の背景色を変更したいと思います。私はjqueryでそれをやりますか？

ここに私のコードへのリンクがあります：http://jsfiddle.net/DdG8m/。

私の問題は、1つのリンクをクリックするとテーブル全体の背景色が変わるということです。助けてください。前もって感謝します。

Answer 1

セレクタに一致するすべての要素ではなく、現在の要素を参照する必要があります。

$("#mainMenu td").click(function() { 
    $(this).css('background-color', '#EDEDED'); 
}); 

このようにCSSプロパティを設定する代わりに、CSSクラスを使用することをお勧めします。

これは、次のようなものです。

$("#mainMenu td").click(function() { 
    $(this).addClass('selected'); 
}); 

と;擬似セレクタ:visitedのみリンク（a）で使用する必要があり

#mainMenu td.selected { 
    background-color: #EDEDED; 
} 

EDIT

、あなたはtableを使うべきではありませんあなたが本当にする必要以上のよ。全体親li要素を埋めるために代わりにテーブルのulリストを使用して、リンク上display: blockjsFiddleを作成し

。

また、event.preventDefault()を使用してリンクをたどらないと、ページをリロードして選択/アクティブリンクのクラスを含めない可能性があります。リンクをたどり、ページをリロードするには、そのHTMLをレンダリングするためにサーバーサイドコードを使用する必要があります。

$("#mainMenu a").click(function(e) { 
    e.preventDefault(); // Don´t follow the link 
    $("#mainMenu a").removeClass('selected'); // Remove class on all menu items 
    $(this).addClass('selected'); // Add class to current menu item 
}); 

Answer 2

あなたの現在のコードは、テーブル内のすべてのTDSを変更します

$(function() { 
    $("#mainMenu td").click(function() { 
     $("#mainMenu td").css('background-color', '#EDEDED'); 
    }); 

}); 
​ 

です。代わりに、関数内で$(this)を使用して、クリックイベントを発生させた要素を選択します。

$(function() { 
    $("#mainMenu td").click(function() { 
     $(this).css('background-color', '#EDEDED'); 
    }); 

}); 
​ 

クリックした以外のすべてのTDSを選択するにはsiblings()セレクタを使用し、他のものを戻すようにします。その後、ちょうどそれに応じてクラスを追加/削除、

$(function() { 
    $('td').click(function() { 
     $(this).css('backgroundColor', '#EDEDED'); 
    }); 
}); 

Answer 3

これを試してみてくださいhttp://jsfiddle.net/DdG8m/4/

$(function() { 
    $('#mainMenu td').click(function(e) { 
     $('#mainMenu td').removeClass('highlight'); 
     $(this).addClass('highlight'); 
    }); 
}); 

注：.highlightクラスの!importantを使用してデフォルトの値を上書きする必要があります。

Answer 4

が.highlightと呼ばれるクラスを作成し、所望の背景色でそれを設定します：

$(function() { 
    $("#mainMenu td").click(function() { 
     $(this).css('background-color', '#EDEDED') 
     .siblings().css('background-color', '#FFFFFF'); 
    }); 
});