Как мне переключить внешний вид кнопки на клик?

Question

Я создал кнопку: «.switch», которая переключается между двумя div'ами «.gi» и «.nogi» - это работает хорошо, но мне кажется, что я не могу заставить себя работать - изменить сам внешний вид .switch при нажатии.

Я пробовал функции с использованием toggle и toggleClass, но ни одна из них у меня не работает.

страница активна https://www.novagrappling.com/rules.html

Вы заметите, что есть две кнопки, одна с GI, выделенным красным, другая с выделенной NOGI. В идеале я хотел, чтобы Gi выделялся изначально, с NOGI скрытым, что включает клик вместе с 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>