Question

我有三个按钮。单击一个按钮时，我需要每个按钮来更改类

因此，如果单击button 1，将更改班级，其他2个按钮将恢复为原来的班级。

如果单击button 2，则button 2将更改类别，其他2个按钮将恢复为原始类别（button 1将恢复并且不再具有先前设置的类别）< / p>

按钮HTML：

<button onclick="show1();" id="btn-take" class="switch-btn">Take</button>
<button onclick="show2();" id="btn-ask" class="switch-btn-middle">Ask</button>
<button onclick="show3();" id="btn-trade" class="switch-btn">Trade</button>

JavaScript：

function show1(){
    document.getElementById('btn-take').classList.add('switch-btn-active');
    document.getElementById('btn-ask').classList.add('switch-btn-middle');
    document.getElementById('btn-trade').classList.add('switch-btn');
}
function show2(){
    document.getElementById('btn-take').classList.add('switch-btn');
    document.getElementById('btn-ask').classList.add('switch-btn-middle-active');
    document.getElementById('btn-trade').classList.add('switch-btn');
}
function show3(){
    document.getElementById('btn-take').classList.add('switch-btn');
    document.getElementById('btn-ask').classList.add('switch-btn-middle');
    document.getElementById('btn-trade').classList.add('switch-btn-active');
}

Answer 1

该问题中没有太多信息，因此，我正在发布一个简单的解决方案。

$(document).ready(function(){
    $('#btn-take, #btn-ask, #btn-trade').click(function(){
        $('#btn-take, #btn-ask, #btn-trade').removeClass('active');
        $(this).addClass('active');
    });
});

.active{
   background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn-take" class="switch-btn">Take</button>
<button id="btn-ask" class="switch-btn-middle">Ask</button>
<button id="btn-trade" class="switch-btn">Trade</button>

Answer 2

单个功能即可：

function show(btn){
    var btns = document.querySelectorAll('button');
    btns.forEach(function(btn){
      btn.classList.remove('active');
    });
    btn.classList.add('active');
}

.active{
  color: white;
  background-color: green;
}

<button onclick="show(this);" id="btn-take" class="switch-btn">Take</button>
<button onclick="show(this);" id="btn-ask" class="switch-btn-middle">Ask</button>
<button onclick="show(this);" id="btn-trade" class="switch-btn">Trade</button>

使用jQuery：

$('[class*=switch-btn]').click(function(){
  $('[class*=switch-btn]').not(this).removeClass('active');
  $(this).addClass('active');
});

.active{
  color: white;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btn-take" class="switch-btn">Take</button>
<button id="btn-ask" class="switch-btn-middle">Ask</button>
<button id="btn-trade" class="switch-btn">Trade</button>

Answer 3

非常简单，甚至可以在不指定按钮类别的情况下一般完成

$(document).ready(function() {
  $('.subnav_links button').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

.subnav_links button {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #000;
}

.subnav_links button.active {
  font-size: 11px;
  font-family: Verdana, sans-serif;
  color: #6A8B4C;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="subnav_links">
  <button class="active">Home</button>
  <button class="">Foo</button>
  <button class="">Doo</button>
</div>

Answer 4

在您的格式中，第一个调用通用函数并删除单击的类，而不是将此类添加到单击的按钮中。

之后，将CSS应用于新类 PS：尚未测试。

例如下面的

：

<button onclick="show('1');" id="btn-take" class="switch-btn">Take</button>
<button onclick="show('2');" id="btn-ask" class="switch-btn-middle">Ask</button>
<button onclick="show('3');" id="btn-trade" class="switch-btn">Trade</button>

css：

.btn-clicked{
   background: #cfcfcf;
}

JS：

function show(action){
      $('#btn-take, #btn-ask, #btn-trade').removeClass('btn-clicked');
      if(action=="1"){
        document.getElementById('btn-take').classList.add('btn-clicked');
      }else if(action=="2"){
        document.getElementById('btn-take').classList.add('btn-clicked');
      }else{
        document.getElementById('btn-trade').classList.add('btn-clicked');
      }
    }

Answer 5

您可以像这样满足您的需求：

HTML：

<div id="switch-btns">
  <button id="btn-take" class="switch-btn">Take</button>
  <button id="btn-ask" class="switch-btn-middle">Ask</button>
  <button id="btn-trade" class="switch-btn">Trade</button>
</div>

Css：

.active {
  background-color: red
}

Js：

$('#switch-btns').on('click', 'button', function() {

  $('#switch-btns button').each(function() {
    $(this).removeClass('active');
  });

  if($(this).hasClass('active')) return;
  $(this).addClass('active');
});

您可以在这里查看我的实时实施：https://codepen.io/nazrhanmohcine/pen/ZdNWjy。

单击时更改按钮的类别

5 个答案: