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
    10 ноя 2019 в 11:35
  • @meine в чекбоксы прописаны vlaue, которые формируют ссылку
    – Alex
    10 ноя 2019 в 11:40
  • Почему бы не использовать radio button вместо checkbox для такой цели? 10 ноя 2019 в 11:40
  • @AlexandrVyshnyvetskyi в чекбоксы прописаны vlaue, которые формируют ссылку
    – Alex
    10 ноя 2019 в 11:41
  • @meine; @AlexandrVyshnevskyi хотя дело так же не в этом, можно даже с radio, но с использованием этого скрипта, который присваивает display: none;
    – Alex
    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
    10 ноя 2019 в 13:03

Ваш ответ

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

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