j查询更改/删除导航链接上的下划线

jQuery change/remove underline on navigation link

本文关键字：链接 下划线 导航 删除 查询      更新时间：2023-09-26

我有一些代码可以根据单击的链接更改链接下方的边框，但是单击新链接后如何将其从旧链接中删除？

$(document).ready(function() {
  $('.nav-link').click(function() {
      $(this).addClass("active-link");
  });
  
});
nav {
    height: 3em;
    width: 100%;
    background-color: #000;
}
.nav-link {
    color: #fff;
}
.nav-link:hover {
    text-decoration: none;
    color: #fff;
}
.active-link {
    border-bottom: 0.2em solid #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<nav>
    <ul class="list-inline">
        <li><a href="#" class="nav-link active-link">Link One</a></li>
        <li><a href="#" class="nav-link">Link Two</a></li>
        <li><a href="#" class="nav-link">Link Three</a></li>
        <li><a href="#" class="nav-link">Link Four</a></li>
        <li><a href="#" class="nav-link">Link Five</a></li>
    </ul>
</nav>

只需从其余部分中删除该类？

$(document).ready(function() {
  var links = $('.nav-link');
  links.click(function() {
      links.not(this).removeClass("active-link");
      $(this).addClass("active-link");
  });
});

使用 .removeClass（）

$(document).ready(function() {
  $('.nav-link').click(function() {
      $('.nav-link').removeClass("active-link");
      $(this).addClass("active-link");
  }); 
});

我想你正在寻找

$(document).ready(function() {
      $('.nav-link').click(function() {
          $('.nav-link').removeClass("active-link");
          $(this).addClass("active-link");
      });
    });
相关文章：