Question

我要将按钮排成菜单栏，我希望它们能像我想要的那样行事。我们假设有按钮A，B，C和D。如果我点击按钮B，我希望它点亮并保持亮起，直到我点击另一个按钮（A，C或D）。这种想法。我很确定它不是新的。而且我相信有比我下面版本更复杂的方法。我还希望每次点击按钮都会显示页面。

$('#abutton').click(function() {
    $('#abutton').removeClass('off').addClass('on');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#bbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('off').addClass('on');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#cbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('off').addClass('on');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#dbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('off').addClass('on');
    window.scrollTo(0,0);
});

Answer 1

使用班级

$('.button').click(function(){
    $('.button').removeClass('on').addClass('off');
    $(this).addClass('on').removeClass('off');
});

fiddle

Answer 2

一个好主意是为所有按钮添加一些类。例如.btn。

$(".btn").on("click", function(){ 
    $(".btn").removeClass("on").addClass("off");
    $(this).removeClass("off").addClass("on"); 
});

如果所有按钮都在某个父级中，则代码更简单。

$(".btn").on("click", function(){ 
    $(this).removeClass("off").addClass("on").siblings().removeClass("on").addClass("off");
});

＆＃13;

$(".btn").on('click', function(){ 
    $(this).removeClass("off").addClass("on").siblings().removeClass("on").addClass("off"); 
});

＆＃13;

button.on { 
    background: yellow; 
    color: #000; 
}
button.off { 
    background: gray; 
    color: #fff; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="abutton" class="btn">button a</button>
<button id="bbutton" class="btn">button b</button>
<button id="cbutton" class="btn">button c</button>
<button id="dbutton" class="btn">button d</button>

＆＃13;

如何点击按钮点亮直到我点击另一个按钮？

2 个答案: