0

При клике по вертикальным вкладкам, окно полностью убирается из-за того что слетает :focus на классе awm_spoilerbox. Как можно решить проблему?

  const tabLinks = document.querySelectorAll(".awm_tabs a");
  const tabPanels = document.querySelectorAll(".awm_tabs_panel");
  for (let el of tabLinks) {
    el.addEventListener("click", e => {
      e.preventDefault();
      document.querySelector(".awm_tabs li.active").classList.remove("active");
      document.querySelector(".awm_tabs_panel.active").classList.remove("active");
      const parentListItem = el.parentElement;
      parentListItem.classList.add("active");
      const index = [...parentListItem.parentElement.children].indexOf(parentListItem);
      const panel = [...tabPanels].filter(el => el.getAttribute("data-index") == index);
      panel[0].classList.add("active");
    });
  }
.awm_spoilerbox {
  outline: none;
  display: inline-block;
  font-family: sans-serif;
}

.awm_spoiler {
  position: absolute;
  display: none;
  background: linear-gradient(to right, #f1f3f4, #f1f3f4 50%, #ffffff 50%, #ffffff);
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  top: 60px;
  z-index: 99;
  
}

.awm_spoilerbox:focus .awm_spoiler {display: block;}
.awm_spoilerbox:focus .awm_close {display: block;opacity: .75;}
.awm_spoilerbox:focus .awm_open {display: none;}
.awm_close {display: none;}
.awm_open {display: block;line-height: 60px;}

.awm-panel {
  background: red;
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

.awm-panel a {
  font-family: sans-serif;
  color: white;
  text-decoration: none;
  margin-right: 30px;
}

body {
  margin: 0;
  background: black;
}

/* Vertical tabs */

.awm_content {
  display: flex;
  background: white;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
 
}

.awm_tabs {
  width: 20%;
}

.awm_tabs_content {
  width: 80%;
}

.awm_content ul {list-style: none;margin: 0;padding: 30px 0;background: #f1f3f4;}
.awm_tabs_panel {display: none;}
.awm_tabs_panel.active {display: block;}
.awm_tabs li.active a, .awm_tabs li a:hover {background: #fff;}

.awm_tabs li a {
  padding: 15px;
  color: #4f5966;
  display: block;
  font-family: sans-serif;
  text-decoration: none;
  margin-right: 0;
}


.awm_tabs_panel {
  padding: 45px 30px;
  animation: scale 0.1s ease-in-out;
  background: white;
  width: 100%;
  box-sizing: border-box;
}

@keyframes scale { 
  0% {transform: scale(1);opacity: 0;} 
  50% {transform: scale(0.9);opacity: 0.5;} 
  100% {transform: scale(1);opacity: 1;} 
}
<div class="awm-panel">

  <div class="awm_spoilerbox" role="tab" tabindex="0">
    <a class="awm_open">Вкладка 1</a>
    <a tabindex="1" class="awm_close">Вкладка 1</a>
    <div class="awm_spoiler">

      <div class="awm_content">
        <ul class="awm_tabs">
          <li class="active"><a href="">Dərs cədvəli</a></li>
          <li><a href="">Müəllimlər</a></li>
          <li><a href="">Digərləri</a></li>
        </ul>
        <div class="awm_tabs_content">
          <div class="awm_tabs_panel active" data-index="0">1</div>
          <div class="awm_tabs_panel" data-index="1">2</div>
          <div class="awm_tabs_panel" data-index="2">3</div>
        </div>
      </div>

    </div>
  </div>
  <div class="awm_spoilerbox" role="tab" tabindex="0">
    <a class="awm_open">Вкладка 2</a>
    <a tabindex="1" class="awm_close">Вкладка 2</a>
    <div class="awm_spoiler">Текст</div>
  </div>

</div>

6
  • 1
    вместо :focus используйте .active в css, он ж есть у активного таба
    – Skywave
    4 июл 2019 в 12:06
  • Верхние вкладки должны работать именно с фокусом
    – Dmitry
    4 июл 2019 в 12:36
  • 1
    @Дмитрий А чем это обусловлено? Это же только создает лишнюю разметку и усложняет взаимодействие, а js при этом все равно используется, в чем смысл?)
    – kost1k
    4 июл 2019 в 17:38
  • @kost1k на верхних табах логике другая, они должны закрываться при клике на сами кнопки или в пустое место вокруг.
    – Dmitry
    5 июл 2019 в 13:39
  • @Дмитрий А в чем проблема реализовать это на js?
    – kost1k
    8 июл 2019 в 7:20

0

Ваш ответ

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

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