2

Знаю, что в сети полно примеров, но, простого варианта без излишеств я не увидел, и, изначально это был простой вариант вкл/выкл через onclick. Потом решил добавить класс к текущему элементу. А теперь - чтоб при открывании одного блока, закрывались все остальные. Сейчас это выглядит так:

.block {
  display: none;
}

.block.active {
  display: block;
}

a.active {
  color: red;
}
<a href="javascript:void(0)" class="toggle-1" onclick="event.preventDefault(); document.getElementsByClassName('block b1')[0].classList.toggle('active');  document.getElementsByClassName('toggle-1')[0].classList.toggle('active');">One</a>
<a href="javascript:void(0)" class="toggle-2" onclick="event.preventDefault(); document.getElementsByClassName('block b2')[0].classList.toggle('active');  document.getElementsByClassName('toggle-2')[0].classList.toggle('active');">Two</a>
<a href="javascript:void(0)" class="toggle-3" onclick="event.preventDefault(); document.getElementsByClassName('block b3')[0].classList.toggle('active');  document.getElementsByClassName('toggle-3')[0].classList.toggle('active');">Three</a>

<div class="block b1">123</div>
<div class="block b2">456</div>
<div class="block b3">789</div>

Помогите это дело записать проще. Чтоб при нажатии на ссылку она получала класс .active и такой же класс получал элемент на странице, например .block.b1, а при открывании 2й ссылки, очищались предыдущие классы у других элементов. По аналогии с табами.

Можно отдельным скриптом, если в inline будет слишком муторно.

Спасибо!

1
  • "Можно отдельным скриптом" — нужно) Чем меньше засорять HTML - тем лучше, за редкими исключениями. Commented 8 янв. 2020 в 16:40

2 ответа 2

2

Вариант с привязкой к порядку элементов: У каждой кнопки - своя пара, другой блок.

tabs("link", "block");
setJsVoid(document.querySelectorAll(".link"));

function tabs(btnClass, blockClass) {
  var link = document.querySelectorAll("." + btnClass);
  var tabs = document.querySelectorAll("." + blockClass);

  for (var i = 0; i < link.length; i++) {
    setClick(i);
  }

  function setClick(i) {
    link[i].addEventListener('click', function() {
      removeClass(link, 'active');
      removeClass(tabs, 'active');
      // При клике - убрать активный класс со всех кнопок и блоков,
      
      addClass(link[i], 'active');
      addClass(tabs[i], 'active');
      // Добавить на нужные элементы.
    });
  }
}

/**************************/

function addClass(elems, className) {
  if (elems instanceof HTMLElement) {
    elems.classList.add(className);
    return;
  }

  for (var i = 0; i < elems.length; i++) {
    elems[i].classList.add(className);
  }
}

function removeClass(elems, className) {
  if (elems instanceof HTMLElement) {
    elems.classList.remove(className);
    return;
  }

  for (var i = 0; i < elems.length; i++) {
    elems[i].classList.remove(className);
  }
}

function setJsVoid(elems) {
  for (var i = 0; i < elems.length; i++) {
    elems[i].setAttribute('href', "javascript:void(0);");
  }
}
.block { display: none; }

.block.active { display: block; }
.link.active { color: red; }
<a class="link">One</a>
<a class="link">Two</a>
<a class="link">Three</a>

<div class="block">111</div>
<div class="block">222</div>
<div class="block">333</div>

И с привязкой к конкретным классам:

tabs("link", "block");
setJsVoid(document.querySelectorAll(".link"));

function tabs(btnClass, blockClass) {
  var link = document.querySelectorAll("." + btnClass);
  var tabs = document.querySelectorAll("." + blockClass);

  for (var i = 0; i < link.length; i++) {
    setClick(i);
  }

  function setClick(i) {
    link[i].addEventListener('click', function() {
      removeClass(link, 'active');
      removeClass(tabs, 'active');
      
      var className = this.dataset.open;
      var blocks = document.querySelectorAll("." + className);
      // Добавил data-атрибуты в HTML и эти 2 строчки в скрипте.
      
      addClass(link[i], 'active');
      addClass(blocks , 'active');
    });
  }
}

/**************************/

function addClass(elems, className) {
  if (elems instanceof HTMLElement) {
    elems.classList.add(className);
    return;
  }

  for (var i = 0; i < elems.length; i++) {
    elems[i].classList.add(className);
  }
}

function removeClass(elems, className) {
  if (elems instanceof HTMLElement) {
    elems.classList.remove(className);
    return;
  }

  for (var i = 0; i < elems.length; i++) {
    elems[i].classList.remove(className);
  }
}

function setJsVoid(elems) {
  for (var i = 0; i < elems.length; i++) {
    elems[i].setAttribute('href', "javascript:void(0);");
  }
}
.block { display: none; }

.block.active { display: block; }
.link.active { color: red; }
<a class="link" data-open="block-1">One</a>
<a class="link" data-open="block-2">Two</a>
<a class="link" data-open="block-3">Three</a>

<div class="block block-1">111</div>

<div class="block block-2">222</div>
<div class="block block-2">222</div>

<div class="block block-3">333</div>
<div class="block block-3">333</div>
<div class="block block-3">333</div>

3
  • Спасибо. Но, хотелось иметь более конкретный пример. Именно минимальный. У вас хорошие вариант, так как его можно использовать в множестве условий, но, он привязан к порядку размещения блоков и ссылок, а не классам. Commented 8 янв. 2020 в 17:19
  • @AlexanderGoroshev Мне всегда казалось, что легче соблюдать порядок элементов, чем возиться с классами) Добавил вариант. Commented 8 янв. 2020 в 17:39
  • Спасибо, похоже на то, что нужно) Commented 8 янв. 2020 в 18:27
1

Как-то так...

Тут добавлены стили для навигации со скроллингом, но сам скрипт занимает 5 строчек

<!DOCTYPE html>
<html>
<head>
  <title>Drag and drop</title>
  <style>
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }
    html {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    nav {
      border: 1px solid black;
      overflow-x: scroll !important;
      user-select: none;
    }
    nav>ul {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      padding-inline-start: 0;
      margin-block-start: 0;
      margin-block-end: 0;
    }
    nav>ul>li {
      list-style-type: none;
      padding: 5px;
      margin: 5px;
    }
    nav>ul>li:not(:first-child) {
      margin-left: -1px;
      border-left: 1px solid black;
    }
    .block {
      padding: 10px;
      background-color: whitesmoke;
      border: 1px solid black;
    }
    .block:nth-child(1)::before { content: "First"; }
    .block:nth-child(2)::before { content: "Second"; }
    .block:nth-child(3)::before { content: "Third"; }
    .block.focus { background-color: cyan; }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
  </nav>
  <main>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </main>
  <script>
    document.querySelectorAll('nav>ul>li').forEach((item, index) => {
      const element = document.querySelector(`main>div:nth-child(${index + 1})`);
      item.addEventListener('mousemove', () => element.classList.add('focus'));
      item.addEventListener('mouseout', () => element.classList.remove('focus'));
    });
  </script>
</body>
</html>
1
  • Спасибо. Но, как и в другом ответе, вы привязываетесь к порядку размещения блоков на странице, а не классам, что не очень удобно и не всегда может быть оправданным. Commented 8 янв. 2020 в 17:22

Ваш ответ

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

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