Изменение активной вкладки без Jquery - PullRequest
Новая
       19

Изменение активной вкладки без Jquery

1 голос
/ 24 апреля 2020

Я искал похожие посты, но все они, кажется, прибегают к Jquery, который в настоящее время считается устаревшим в большинстве случаев.

Мой вопрос: как я могу изменить класс активных (в настоящее время включен тег «Projects», помеченный тегами «братья и сестры» при его нажатии?

Я действительно пытаюсь добиться результатов, используя только Vanilla Javascript и, надеюсь, метод .forEach, чтобы сделать его более функциональным.

Извините, что не предоставил JS в данный момент, кажется, я действительно борюсь с основами. 

<nav id="sidebar">
        <div class="toggle-btn" onclick="toggleSidebar()">
            <i class="fas fa-angle-double-right fa-2x"></i>
        </div>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link active">PROJECTS</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">CREATION PROCESS</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">BEFORE AND AFTER</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">ABOUT THE STUDIO</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">CONTACT</a>
            </li>
        </ul>
    </nav>

РЕДАКТИРОВАТЬ: Благодаря первому ответу мне удалось выяснить, чистый и современный способ его рефакторинга на мой вкус: 

const tabs = document.querySelectorAll('.nav-link');

tabs.forEach(tab => tab.addEventListener('click', toggleActiveTab));

function toggleActiveTab(e) {
tabs.forEach(tab => {
    tab.classList.remove('active');
});
e.currentTarget.classList.toggle('active');
}

1 Ответ

0 голосов
/ 24 апреля 2020

Вот вам go с решением 

var items = document.getElementsByClassName('nav-link');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', printDetails);
}

function printDetails(e) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].classList.contains("active")) {
      items[i].classList.toggle("active")
    }
  }
  this.classList.add("active");
}
.active {
  background: #ddd;
}
<nav id="sidebar">
  <div class="toggle-btn" onclick="toggleSidebar()">
      <i class="fas fa-angle-double-right fa-2x"></i>
  </div>
  <ul class="navbar-nav">
      <li class="nav-item">
          <a href="#" class="nav-link active">PROJECTS</a>
      </li>
      <li class="nav-item">
          <a href="#" class="nav-link">CREATION PROCESS</a>
      </li>
      <li class="nav-item">
          <a href="#" class="nav-link">BEFORE AND AFTER</a>
      </li>
      <li class="nav-item">
          <a href="#" class="nav-link">ABOUT THE STUDIO</a>
      </li>
      <li class="nav-item">
          <a href="#" class="nav-link">CONTACT</a>
      </li>
  </ul>
</nav>

Добавьте прослушиватель событий для каждого nav-link, если вы не можете добавить событие onClick в код HTML.

Затем в методе click проверьте активный класс в каждом элементе nav-link, если активный класс присутствует, переключите его.

Затем добавьте активный класс к нажатой вкладке.

...