切换类 onClick 切换

Question

我边做边学，在开发网站时遇到了障碍。我有一个包含 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>

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

感谢您的宝贵时间！

Answer 1

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

    <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>

Answer 2

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

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

Answer 3

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

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>

Answer 4

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

切换类 onClick 切换

Switching classes onClick toggle

html

javascript

onclick

classname

切换 类 onClick 切换

Switching classes onClick toggle

html

javascript

onclick

classname

切换类 onClick 切换