单击另一个时释放切换效果 link

Question

我目前有 JavaScript 会导致 link 在单击时更改背景颜色：

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

它有效，但我希望在我点击另一个 link 时关闭该颜色。

Answer 1

你可以这样做

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

  });
});

JSFIDDLE

Answer 2

您可以切换 on/off 和 class。

.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>

单击另一个时释放切换效果 link

Release toggle effect when clicking on another link

html

javascript

css

jquery

toggle