0

Как сделать, чтобы при активации второго чекбокса снимался первый и пропадал контент первой вкладки?
Можно было бы оформить вместо checkbox, например, radio, но ситуация требует именно такого checkbox.

jQuery(document).ready(function($) {
const checkbox2tabMap = {
  link01: 'tab1',
  link02: 'tab2',
  link03: 'tab3',
};
function onCheckboxChange(event) {
  const tab = document.getElementById(checkbox2tabMap[event.target.id]);
  if(!tab) { return; }
  tab.style.display = event.target.checked ? 'block' : 'none';
}
Object.keys(checkbox2tabMap).forEach((id) =>{
    let check = document.getElementById(id);
    if(check) check.addEventListener('change', onCheckboxChange)
});
});
label {display: block;}



.link {
  width: 100px; display: inline-block;
  text-align: center; padding: 3px 0;
  background-color: #ddd; user-select: none;
  border: 1px solid #333; cursor: pointer;
}
.tab {
  width: 400px; height: 50px; margin: 5px 24px;
  background-color: #666; color: #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div class="divider">
  <input id="link01" class="linkinp form-check-input" name="link" type="checkbox">
  <label for="link01" class="link">Вкладка 1</label>
</div><br>

<div class="divider">
  <input id="link02" class="linkinp form-check-input" name="link" type="checkbox">
  <label for="link02" class="link">Вкладка 2</label>
</div><br>
<div class="divider">
  <input id="link03" class="linkinp form-check-input" name="link" type="checkbox">
  <label for="link03" class="link">Вкладка 3</label>
</div><br>

<div id="tab1" class="tab2" style="display: none;">Контент вкладки 1</div>
<div id="tab2" class="tab2" style="display: none;">Контент вкладки 2</div>
<div id="tab3" class="tab2" style="display: none;">Контент вкладки 3</div>

5
  • почему не сделать простые "табы" без чекбоксов? или нужны именно они?
    – meine
    Commented 10 нояб. 2019 в 11:35
  • @meine в чекбоксы прописаны vlaue, которые формируют ссылку
    – Alex
    Commented 10 нояб. 2019 в 11:40
  • Почему бы не использовать radio button вместо checkbox для такой цели? Commented 10 нояб. 2019 в 11:40
  • @AlexandrVyshnyvetskyi в чекбоксы прописаны vlaue, которые формируют ссылку
    – Alex
    Commented 10 нояб. 2019 в 11:41
  • @meine; @AlexandrVyshnevskyi хотя дело так же не в этом, можно даже с radio, но с использованием этого скрипта, который присваивает display: none;
    – Alex
    Commented 10 нояб. 2019 в 12:09

1 ответ 1

1
const checkbox2tabMap = {
  link01: 'tab1',
  link02: 'tab2',
  link03: 'tab3',
  link04: 'tab4',
  link05: 'tab5',
  link06: 'tab6',
  link07: 'tab7',
  link08: 'tab8',
  link09: 'tab9',
  link010: 'tab10',
  link011: 'tab11',
  link012: 'tab12',
  link013: 'tab13',
  link014: 'tab14',
  link015: 'tab15',
  link016: 'tab16',
  link017: 'tab17',
  link018: 'tab18',
  link019: 'tab19'
};

jQuery(document).ready(function($) {
  const toggleTabs = (checkbox2tabMap, currnetBoxId) => {
    // создаем функцию что бы можно было вызвать при клике
    Object.keys(checkbox2tabMap)
      .filter(key => key !== currnetBoxId) // фильтруем массив ключей исключая текущий айди чекбокс и таба
      .forEach(checkBoxId => {
        const checkBox = document.getElementById(checkBoxId);
        const tab = document.getElementById(checkbox2tabMap[checkBoxId]);

        if (checkBox && tab) {
          // если в DOM есть чекбокс и таб
          tab.style.display = 'none'; // скрыть таб
          checkBox.checked = false; // убрать все чекбоксы
          checkBox.addEventListener('change', e => {
            toggleTabs(checkbox2tabMap, e.target.id); // передаем в нашу функцию текущий айди что бы все отфильтровать кроме текущего айди
            tab.style.display = 'block'; // показываем только текущий таб
            e.target.checked = true; // чекаем только текущий чекбокс
          });
        }
      });
  };

  toggleTabs(checkbox2tabMap);
});
1
  • Александр, Вы просто бог!
    – Alex
    Commented 10 нояб. 2019 в 13:03

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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