Question

我有一个看起来像这样的菜单

：

PORTS
0.0.0.0:4466->4466/tcp
0.0.0.0:5432->5432/tcp

我想做的是将home设置为默认类，然后在选择另一个链接时，将活动类从home移除并添加到所选的锚定链接中。

我以为我可以使用jQuery toggleClass做到这一点，但是活动类留在家里，然后每个链接都获得<div id="nav"> <ul> <li class="active"><a href="#home" onclick="closeNav();">Home</a></li> <li><a href="#about" onclick="closeNav();">About</a></li> <li><a href="#products" onclick="closeNav();">Products</a></li> <li><a href="#portfolio" onclick="closeNav();">Portfolio</a></li> <li><a href="#howitworks" onclick="closeNav();">How it Works</a></li> <li><a href="#contact" onclick="closeNav();">Contact</a></li> </ul> </div>类。

active

我不确定我是否正在使用此权限，但是绝对不能按我的预期工作。

示例：https://jsfiddle.net/0tgzfm7b/

Answer 1

这是如何切换LIs

$("#nav li").click(function(e) {
  e.preventDefault();
  $("#nav li").removeClass("active");
  $(this).closest("li").addClass("active");
  // here you can close the divs and open the one belonging to the clicked one
});

.active { background-color: yellow }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
  <ul>
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#howitworks">How it Works</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

Answer 2

在事件监听器中，您可以指定一个参数，该参数本人将是此事件。此事件是一个对象，其中包含对被单击元素的引用，即“ currentTarget”，您可以使用此引用与触发该事件的元素进行交互。

$("#nav li").click(function(event){
    $("#nav li").removeClass("active");
    $(event.currentTarget).addClass("active");
});

锚链接切换类

2 个答案: