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

Я хочу переключить содержимое в моем файле HTML с помощью радиокнопок. В моем случае у меня есть 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;
}

jquery html switch-statement toggle

07.05.2019 08:33

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

07.05.2019 09:02

Другие вопросы по теме

Как добавить два входных значения и показать в третьем поле ввода?? с помощью простого JavaScript, подобного этому, помогите мне, где я был неправ

Показать поле ввода формы в соответствии со значением раскрывающегося списка

Невозможно поместить текст в поле ввода в asp.net

Как установить изображение для летнего заметки так, чтобы оно всегда занимало всю ширину

Скрыть div со страницы

Холст расположен над панелью навигации

Отображать уведомление об обрезанном изображении сбоку от кнопки

Как сначала установить идентификатор скрытого элемента с помощью jquery

Как центрировать символ и всегда иметь отступы вокруг него независимо от размера экрана

Видеотег html не воспроизводит файл m3u8 при обслуживании сервером golang

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

Ответы 1

Другие вопросы по теме

Похожие вопросы