jquery - 只改变一个的背景颜色

Answer 1

假设a元素是兄弟元素，例如：

<a class="demo" href="#">link one</a>
<a class="demo" href="#">link two</a>
<a class="demo" href="#">link three</a>
<a class="demo" href="#">link four</a>

我建议：

$(".demo").click(function () {
    $(this).css('color', 'red').siblings().css('color','');
});

JS 小提琴演示。

但与其直接操作 CSS，不如采用相同的方法并应用/删除特定类更容易：

$(".demo").click(function () {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

JS 小提琴演示。

如果它们不是兄弟元素，例如：

<ul>
    <li><a class="demo" href="#">link one</a></li>
    <li><a class="demo" href="#">link two</a></li>
    <li><a class="demo" href="#">link three</a></li>
    <li><a class="demo" href="#">link four</a></li>
</ul>

那我建议：

$(function () {
    $(".demo").click(function () {
        $('a.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    });
});

JS 小提琴演示。

参考：

• addClass().
• click().
• css().
• removeClass().
• siblings().

Answer 2

你去：

$(function() {
  $(".text").click(function() {
   $('.text').css('color','');
   $(this).css( "color", "red" );
   });
 });

http://jsfiddle.net/d7Nyu/

Answer 3

你可以使用这个：

$(function () {
    $(".text").click(function () {
        $("#Content").html($(this).next(".text1").html());
        $(".text").css("color", "");
        $(this).css("color", "red");
    });
});

Answer 4

如何将最后点击的链接保存在变量中？

$(function () {
    var lastClicked;
    $(".text").click(function () {
        $("#Content").html($(this).next(".text1").html());
        if (lastClicked != undefined) {
            $(lastClicked).css("color", "");
        }
        lastClicked = this;
        $(this).css("color", "yellow");
    });
});

在这里查看演示。当然，将颜色从更改"yellow"为"red"（我使用黄色，因为它会引起演示的更多注意。

Answer 5

首先从所有其他节点中删除颜色，请参阅下面的评论...

$(function() {
    $(".text").click(function() {
       $(".text").css("color",""); // remove the color from all other nodes first
       $("#Content").html($(this).next(".text1").html());
       $(this).css( "color", "red" );
     });
 });