如何切换按钮 onClick 的外观？

Question

我创建了一个按钮：'.switch'，它在两个 divs '.gi' 和 '.nogi' 之间切换 - 这很好用，但我似乎无法工作的是.switch 外观本身会在单击时发生变化。

我尝试过使用 toggle 和 toggleClass 的函数，但它们都不适合我。

该页面已在 https://www.novagrappling.com/rules.html

上线

您会注意到有两个按钮，一个以红色突出显示 GI，另一个以突出显示 NOGI。理想情况下，我希望 Gi 最初突出显示，隐藏 NOGI，它会打开 onClick 以及下面的 div。谢谢

$('div.nogi, div.switched').hide();
$(".switch").on("click", function() {
  $('div.gi, div.nogi').toggle();
  $('div.switch, div.switched').toggle();
});

.switch,
.switched {
  margin: auto;
  display: block;
  width: 120px;
  height: 40px;
}

.gi-switch {
  display: inline-block;
  float: left;
  width: 50%;
  height: 40px;
  background: #cd3046;
  border-radius: 15px 0px 0px 15px;
  cursor: pointer;
}

.gi-switched {
  display: inline-block;
  float: left;
  width: 50%;
  height: 40px;
  background: #232528;
  border-radius: 15px 0px 0px 15px;
  cursor: pointer;
}

.nogi-switch {
  display: inline-block;
  float: right;
  width: 50%;
  height: 40px;
  background: #232528;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}

.nogi-switched {
  display: inline-block;
  float: right;
  width: 50%;
  height: 40px;
  background: #cd3046;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}

<a class="switch">
  <div class="gi-switch">
    <div class="gi-title">GI</div>
  </div>
  <div class="nogi-switch">
    <div class="nogi-title">NO GI</div>
  </div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我不确定为什么 .toggleClass() 对您不起作用。你可以这样使用它：

$('.switch .gi-switch').toggleClass('gi-switched');
$('.switch .nogi-switch').toggleClass('nogi-switched');

如果将此添加到您的 onclick 函数中，您应该会得到接近您想要的结果。

$('div.nogi').hide();
$(".switch").on("click", function() {
  $('div.gi, div.nogi').toggle();
  $('.switch .gi-switch').toggleClass('gi-switched');
  $('.switch .nogi-switch').toggleClass('nogi-switched');
});

.switch,
.switched {
  margin: auto;
  display: block;
  width: 120px;
  height: 40px;
}

.gi-switch {
  display: inline-block;
  float: left;
  width: 50%;
  height: 40px;
  background: #cd3046;
  border-radius: 15px 0px 0px 15px;
  cursor: pointer;
}

.gi-switched {
  display: inline-block;
  float: left;
  width: 50%;
  height: 40px;
  background: #232528;
  border-radius: 15px 0px 0px 15px;
  cursor: pointer;
}

.nogi-switch {
  display: inline-block;
  float: right;
  width: 50%;
  height: 40px;
  background: #232528;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}

.nogi-switched {
  display: inline-block;
  float: right;
  width: 50%;
  height: 40px;
  background: #cd3046;
  border-radius: 0px 15px 15px 0px;
  cursor: pointer;
}

<a class="switch">
  <div class="gi-switch">
    <div class="gi-title">GI</div>
  </div>
  <div class="nogi-switch">
    <div class="nogi-title">NO GI</div>
  </div>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何切换按钮 onClick 的外观？

How do I switch the appearance of a button onClick?

html

javascript

css

onclick

toggle