Как добавить переключатель контента на переключателях с помощью jQuery?

Question

Я хочу переключать содержимое моего HTML-файла с помощью кнопок Radio.В моем случае у меня есть 3-сторонняя радио-кнопка, которая должна показывать div или раздел HTML-кода и скрывать два других при нажатии.Кто-нибудь может мне помочь с этим?Я добавил, как выглядит моя радио-кнопка в HTML, может быть, кто-то может показать мне, как будет выглядеть способ jQuery для переключения div или раздела с ним.Заранее спасибо!

jsFiddle: https://jsfiddle.net/Lk5dwrt2/

<div class="toggle_radio">
            <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option">
            <input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option">
            <input type="radio" class="toggle_option" id="third_toggle"     name="toggle_option">
            <label for="first_toggle"><p>SCORE</p></label>
            <label for="second_toggle"><p>CLOCK</p></label>
            <label for="third_toggle"><p>CONFIG</p></label>
        <div class="toggle_option_slider">
        </div>
    </div>

  <div class="contentScore">
  <p>
  This is content 1
  </p>
  </div>

  <div class="contentClock">
  <p>
  This is content 2
  </p>
  </div>

  <div class="contentConfig">
  <p>
  This is content 3
  </p>
  </div>

*{
  margin:0px;
  padding:0px;
}

.toggle_radio{
  position: relative;
  border:1.5px solid #58B947;
  margin: 15px auto;
  overflow: hidden;
  padding: 0 !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  height: 28px;
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type=radio]{
  display: none;
}
.toggle_radio label{
  font:"Lato Light";
  color: black;
  display: block;
  width: 100px;
  height: 20px;
  margin: 3px 3px;
  cursor: pointer;
  text-align: center;
}
.toggle_option_slider{
  z-index: -1;
  width: 33%;
  height: 120%;
  position: absolute;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

#first_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 0px;
}
#second_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 108.5px;
}
#third_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 218px;
}

Answer 1

Это одна из возможных практик.Играть с jQuery будет проще, но вам нужно добавить некоторые классы и атрибуты, чтобы помочь в этом.

(function($) {

  switch_content();
  $('input.toggle_option').on('click', function() {
    switch_content();
  });
  
  function switch_content(content) {
    $('.content').hide(0);
    $('.'+$('input.toggle_option:checked').data('content')).show(0);
  }

})(jQuery);

*{
  margin:0px;
  padding:0px;
}

.toggle_radio{
  position: relative;
  border:1.5px solid #58B947;
  margin: 15px auto;
  overflow: hidden;
  padding: 0 !important;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  height: 28px;
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type=radio]{
  display: none;
}
.toggle_radio label{
  font:"Lato Light";
  color: black;
  display: block;
  width: 100px;
  height: 20px;
  margin: 3px 3px;
  cursor: pointer;
  text-align: center;
}
.toggle_option_slider{
  z-index: -1;
  width: 33%;
  height: 120%;
  position: absolute;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

#first_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 0px;
}
#second_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 108.5px;
}
#third_toggle:checked ~ .toggle_option_slider{
  background: #58B947;
  left: 218px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle_radio">
            <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option" data-content="contentScore">
            <input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option" data-content="contentClock">
            <input type="radio" class="toggle_option" id="third_toggle" name="toggle_option" data-content="contentConfig">
            <label for="first_toggle"><p>SCORE</p></label>
            <label for="second_toggle"><p>CLOCK</p></label>
            <label for="third_toggle"><p>CONFIG</p></label>
        <div class="toggle_option_slider">
        </div>
    </div>

  <div class="content contentScore">
  <p>
  This is content 1
  </p>
  </div>

  <div class="content contentClock">
  <p>
  This is content 2
  </p>
  </div>

  <div class="content contentConfig">
  <p>
  This is content 3
  </p>
  </div>