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

您的代码没有从其他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');
    }
  });
}

＆＃13;

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));
});

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

您可以使用像这样的jquery轻松完成

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

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

切换类onClick切换

4 个答案: