Question

我目前使用JavaScript会导致链接在点击时更改背景颜色：

$(".button").click(function(){ 
    $(this).css('background-color', '#555');
});

它确实有效，但是当我点击另一个链接时，我希望该颜色可以关闭。

Answer 1

你可以这样做

$(function() {
  $(".button").click(function() {
    $(this).css('background-color', '#555');
    $(".button").not($(this)).css('background-color', '');

  });
});

JSFIDDLE

Answer 2

您可以打开/关闭课程。

.toggled {
     background-color: #555;
}

//In JavaScript
$(function() {
    var allButtons = $(".button");
    allButtons.click(function() {
        allButtons.removeClass("toggled");
        $(this).addClass("toggled");
    });
});

Answer 3

您需要将背景设置为点击.button并删除其他元素的背景。您可以使用.siblings()选择已点击的.button的同级元素。

$(".button").click(function() {
    $(this).css("background-color", "#555").siblings().css("background-color", "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="button">Button1</a>
<a href="#" class="button">Button2</a>
<a href="#" class="button">Button3</a>

单击其他链接时释放切换效果

3 个答案: