如何从列表项中添加和删除类？

Question

我为网站设计了侧导航。如何在单击导航项时添加一个类并将其从上一个导航项中删除？

我在这里尝试过这个解决方案：https://codepen.io/8eni/pen/MaGVrq

我也尝试了一些 jQuery。

这是我的代码：

<ul class="side_menu" id="sideMenu">
  <li class="list_header">
    <p class="list_p">REVIEWS</p>
    <ul class="sub_list">
      <li class="sub_list_item" style="padding-top: 0px !important;">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-layer-group padding_right"></i> All Reviews
        </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-thumbs-up padding_right"></i> Best Albums
        </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-thumbs-down padding_right"></i> Worst Albums
        </a>
      </li>
    </ul>
  </li>
  <li class="list_header">
    <p class="list_p">GENRES</p>
    <ul class="sub_list">
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-music padding_right"></i> Dub
        </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-music padding_right"></i> Electronica
        </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
          <i class="fas fa-music padding_right"></i> Grundge
        </a>
      </li>
    </ul>
  </li>
</ul>

我希望将一个类添加到用户单击的特定项目中。单击另一个项目后，前一个项目的类将被删除。

Answer 1

这是一种纯粹的JavaScript 方法（无依赖关系）。为了演示，我阻止了默认链接行为。

const listItems = document.querySelectorAll('.sub_list_item');

function setActiveClass() {
  if (document.querySelector('.sub_list_item.active') != null) {
    document.querySelector('.sub_list_item.active').classList.remove('active');  
  } 
  this.classList.add('active');
}

listItems.forEach(item => {
  item.addEventListener('click', setActiveClass);
});

// DEMO ONLY — REMOVE
const listLinks = document.querySelectorAll('.sub_list_link');
listLinks.forEach(link => {
  link.addEventListener('click', e => e.preventDefault());
});

.sub_list_item.active {
  background-color: yellow;
}

<ul class="side_menu" id="sideMenu">
  <li class="list_header">
    <p class="list_p">REVIEWS</p>
    <ul class="sub_list">
      <li class="sub_list_item" style="padding-top: 0px !important;">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
                    <i class="fas fa-layer-group padding_right"></i>
                    All Reviews
                  </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
                    <i class="fas fa-thumbs-up padding_right"></i>
                    Best Albums
                  </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
                    <i class="fas fa-thumbs-down padding_right"></i>
                    Worst Albums
                  </a>
      </li>
    </ul>
  </li>
  <li class="list_header">
    <p class="list_p">GENRES</p>
    <ul class="sub_list">
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
                    <i class="fas fa-music padding_right"></i>
                    Dub
                  </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
                    <i class="fas fa-music padding_right"></i>
                    Electronica
                  </a>
      </li>
      <li class="sub_list_item">
        <a href="https://www.facebook.com" target="_blank" class="sub_list_link">
                    <i class="fas fa-music padding_right"></i>
                    Grundge
                  </a>
      </li>
    </ul>
  </li>
</ul>

jsFiddle

Answer 2

使用 jQuery：

$(document).ready(function(){
    $('.sub_list_item').click(function(){
        $('.sub_list_item').removeClass('yourClass');
        $(this).addClass('yourClass');
    });
});

希望这行得通！这个想法是从所有导航项中删除yourClass，然后将其仅添加到当前项中。