jquery - jqueryを使用して、クリックされたリンクのみの背景色を変更するにはどうすればよいですか

Question

リンクのリストがあります。jquery を使用して、クリックされたリンクのみの背景色を変更し、別のリンクをクリックした場合に元の色に戻すにはどうすればよいですか??

Answer 1

これはあなたのためにそれをするはずです:

$("a").click( function(event)
{
    $("a").css('background-color', '');
    $(this).css('background-color', 'red');
});

現実の世界では、これらのリンクは div などの内部にある可能性が高いため、次のようにする必要があります。

<div id="divName">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
​
<script language="javascript">

$("#divName a").click( function(event)
{
    $("a").css('background-color', '');
    $(this).css('background-color', 'red');
});

</script>

Answer 2

おそらくこのような基本的なものですか？

$("#linkDivWrapper").on("click", ".linkClass", function () {
    $(this).css({'background-color': '#ccc'});
}); ​

Answer 3

非常に一般的には、マークアップが投稿されていないため、すべての<a>要素をターゲットにしてデフォルトのアクションを防止するため、新しいページに移動するとリンクの強調表示がほとんど役に立たなくなります。

var elems = $('a'); //select all a elements, could use class instead;

elems.on('click', function(e) {
    e.preventDefault(); //prevent default action
    $(this).addClass('highlight'); //add highlight class to clicked
    elems.not(this).removeClass('highlight'); //remove highlight class from others
});

Answer 4

このjsfiddleデモを確認してください

HTML：

<ul id="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul​​​​​​​​​​​​​​&gt;​​​​​​​​

脚本：

$("#menu li a").click( function(event)
{
    $("li a").css('background', '');
    $(this).css('background', '#f5c491');
});​

これがお役に立てば幸いです。