如何使用 jQuery 在单选按钮上添加内容开关？

Question

我想通过单选按钮切换 HTML 文件中的内容。在我的例子中，我有一个三向单选按钮，它应该显示 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>

如何使用 jQuery 在单选按钮上添加内容开关？

How to add a content switch on radio buttons with jQuery?

html

jquery

toggle

switch-statement