1

Нужно сделать так чтобы в зависимости от того, какой input на данный момент активен, показывался определенный контент. Т.е. если выбран первый input то .content1 (Он по умолчанию, даже когда ничего не выбрано), если второй, то .content2

.content2 {
  display: none;
}

.content {
  max-width: 200px;
}
<div class="content content1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perferendis totam molestiae earum beatae qui, assumenda error nulla neque pariatur autem eos quasi cum, culpa aperiam reiciendis delectus dolores fugit?</div>
<div class="content content2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim, tenetur est, libero magnam vel minima alias harum autem sequi blanditiis commodi ad quo facilis, accusamus laudantium ipsum dolore laborum ab.</div>

<input type="radio" name='variable' id='id1'>
<label for="id1">Variable 1</label>
<input type="radio" name='variable' id='id2'>
<label for="id2">Variable 2</label>

0

2 ответа 2

4

function update() {
  var i;
  var blocks = document.querySelectorAll(".content");
  for (i = 0; i < blocks.length; i++) {
    blocks[i].style.display = 'none';
  }
  
  var block = "content1";
  var radios = document.querySelectorAll("input[type='radio'][name='variable']");
  for (i = 0; i < radios.length; i++) {
    if (radios[i].checked)
      block = radios[i].dataset.block;
  }

  document.querySelector(".content." + block).style.display = "block";
}

update();
.content1 {
  color:blue;
}
.content2 {
  display: none;
  color:red;
}

.content {
  max-width: 200px;
}
<div class="content content1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perferendis totam molestiae earum beatae qui, assumenda error nulla neque pariatur autem eos quasi cum, culpa aperiam reiciendis delectus dolores fugit?</div>
<div class="content content2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim, tenetur est, libero magnam vel minima alias harum autem sequi blanditiis commodi ad quo facilis, accusamus laudantium ipsum dolore laborum ab.</div>

<input type="radio" name='variable' id='id1' data-block="content1" onchange="update()">
<label for="id1">Variable 1</label>
<input type="radio" name='variable' id='id2' data-block="content2" onchange="update()">
<label for="id2">Variable 2</label>

2
  • Как оно вообще работает? Тут же даже нет слушателя какого-нибудь события... И еще вопрос, что значит этот кусок кода? querySelector(".content." + block) Какой селектор в итоге будет браться?
    – uzi_no_uzi
    29 июн 2018 в 21:54
  • 1
    @uzi_no_uzi Но работает же! Слушатели событий - onchange="update()". Селектор будет ".content.content1" или ".content.content2".
    – user176262
    29 июн 2018 в 22:01
3

Если я Вас правильно понял, это можно сделать и без JS. То что Вы описали, обыкновенные табы.

.tabs-widget{position:relative;text-align:center}
.tab-trigger{position:absolute;clip:rect(0, 0, 0, 0)}
label{margin:0 20px;cursor:pointer}
label:hover{background:gray}
.scroller{display:none;position:absolute;left:50%;transform:translatex(-50%);margin-top:10px;width:400px}
#tab-1-1:checked ~ #tab_1_1, #tab-1-2:checked ~ #tab_1_2,#tab-1-3:checked ~ #tab_1_3{display:block}
#tab-1-1:checked ~ label[for='tab-1-1'], #tab-1-2:checked ~ label[for='tab-1-2'],#tab-1-3:checked ~ label[for='tab-1-3']{background:#000;color:#fff}
.scroller:nth-of-type(1){color:red}
.scroller:nth-of-type(2){color:green}
.scroller:nth-of-type(3){color:blue}
<div class="tabs-widget">
  <input class="tab-trigger" type="radio" id="tab-1-1" name="radio" checked="checked"/>
  <label for="tab-1-1">LINK1</label>
  <input class="tab-trigger" type="radio" id="tab-1-2" name="radio"/>
  <label for="tab-1-2">LINK2</label>
  <input class="tab-trigger" type="radio" id="tab-1-3" name="radio"/>
  <label for="tab-1-3">LINK3</label>
  <div class="scroller" id="tab_1_1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi recusandae error corrupti molestias tenetur obcaecati a? Saepe magnam animi iure harum quibusdam unde sit reprehenderit accusamus dolorum, quo quis quidem?</div>
  <div class="scroller" id="tab_1_2">Loremのイプサムのニンジンは、リベートを強化します。誤って受け入れた場合面倒バウンド盲目になりますか?心の中で、これらの偉大な悲しみの一部を非難する権利、多くの場合、男性は全く不明である何の事、彼がどこから来るかで障害を見つけますか?</div>
  <div class="scroller" id="tab_1_3">Lorem ipsum गाजर बढ़ाया छूट। अगर गलती से स्वीकार कर लिया परेशानी बाध्य अंधा हो गए हैं? मन की है, है ना इन महान दु: ख में से कुछ का आरोप लगा है, अक्सर जहां वह, से आता है क्या बातें एक आदमी पूरी तरह अनजान हैं के साथ गलती खोजने के?</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.