切换类 onClick 切换答案

【问题标题】：Switching classes onClick toggle切换类 onClick 切换
【发布时间】：2018-05-18 21:26:31
【问题描述】：

我正在边做边学，在开发网站时遇到了障碍。我有一个包含 4 个选项的菜单，在 css 中有一个活动状态和关闭状态，第一个选项默认情况下是活动的。单击任何选项时，它会将其切换到活动状态，但不会将前一个选项更改为关闭状态。

代码：

function myFunc(e) {
  if (e.className == 'channel') {
    e.className = 'channel active';
  } else {
    e.className = 'channel';
  }
}

<li id="test" class="channel active" data-v-a3c933a2="" onclick="openPlayer('option1'); myFunc(this)">
  <div class="status offline" data-v-a3c933a2="">Offline <span class="viewers" data-v-a3c933a2="">0</span>
  </div><a rel="nofollow" href="javascript:void" class="button" style="border-bottom-color:#ee4b23;" data-v-a3c933a2="">Option1</a>
</li>
<li id="test" class="channel" data-v-a3c933a2="" onclick="openPlayer('option2'); myFunc(this)">
  <div class="status offline" data-v-a3c933a2="">Offline <span class="viewers" data-v-a3c933a2="">0</span>
  </div><a rel="nofollow" href="javascript:void" class="button" style="border-bottom-color:#ee4b23;" data-v-a3c933a2="">Option2</a>
</li>
<li id="test" class="channel" data-v-a3c933a2="" onclick="openPlayer('option3'); myFunc(this)">
  <div class="status offline" data-v-a3c933a2="">Offline <span class="viewers" data-v-a3c933a2="">0</span>
  </div><a rel="nofollow" href="javascript:void" class="button" style="border-bottom-color:#ee4b23;" data-v-a3c933a2="">Option3</a>
</li>
<li id="test" class="channel" data-v-a3c933a2="" onclick="openPlayer('option4'); myFunc(this)">
  <div class="status offline" data-v-a3c933a2="">Offline <span class="viewers" data-v-a3c933a2="">0</span>
  </div><a rel="nofollow" href="javascript:void" class="button" style="border-bottom-color:#ee4b23;" data-v-a3c933a2="">Option4</a>
</li>

如何让所有非活动选项实际显示为关闭状态，而不是仅在每次点击时切换？

感谢您的宝贵时间！

【问题讨论】：

标签： javascript html onclick classname

【解决方案1】：

您的代码不会从其他 LI 中删除 active 类。遍历 LI 并删除 active 类。至于被点击的LI，检查它是否处于活动状态。如果是，请删除该类。如果不是，请添加类。

function myFunc(e) {
  document.querySelectorAll('li').forEach((li) => {
    // Check if the clicked li has the class 'active'. If it doesn't,
    // add the 'active' class.
    if (e === li && !e.classList.contains('active')) {
      li.classList.add('active');
    } else { // Just remove the 'active' class from each li.
      li.classList.remove('active');
    }
  });
}

function myFunc(e) {
  document.querySelectorAll('li').forEach((li) => {
    // Check if the clicked li has the class 'active'. If it doesn't,
    // add the 'active' class.
    if (e === li && !e.classList.contains('active')) {
      li.classList.add('active');
    } else { // Just remove the 'active' class from each li.
      li.classList.remove('active');
    }
  });
}

const lis = Array.from(document.getElementsByTagName('li'));

lis.forEach((li) => {
	li.addEventListener('click', myFunc.bind(null, li));
});

* {
  margin: 0;
  padding: 0;
}

body {
  font: normal 14px/1.8 sans-serif;
}

ul {
  list-style: none;
}

li {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}

a {
  color: #666;
  text-decoration: none;
}

.active {
  background: #999;
}

.active a {
  color: #fff;
}

<ul>
  <li>
    <a href="#">Option 1</a>
  </li>
  <li>
    <a href="#">Option 2</a>
  </li>
  <li>
    <a href="#">Option 3</a>
  </li>
  <li>
    <a href="#">Option 4</a>
  </li>
</ul>

【讨论】：

【解决方案2】：

最初 option1 处于活动状态。当您单击选项 2 时，选项 2 变为活动状态，但没有代码使选项 1 不活动。所以 option1 和 option2 都处于活动状态。添加逻辑以确保在任何时候都只能设置一个选项为活动类。

【讨论】：

【解决方案3】：

你可以像这样使用 jquery 轻松做到这一点

$(document).ready(function(){
  var items = $(".item");
  items.on("click",function(){
    $(".item").removeClass("selected");
    $(this).addClass("selected");
  });
});

【讨论】：

【解决方案4】：

根据您的要求检查这是一个简单的示例。

    <ul id="navlist">
    <li id="home"><a class="nav" href="home">Home</a></li>
    <li id="about"><a class="nav" href="about-us">About Us</a></li>
</ul>
<script>
$('#navlist a').click(function(e) {
    e.preventDefault(); //prevent the link from being followed
    $('#navlist a').removeClass('selected');
    $(this).addClass('selected');
});
<script>

【讨论】：