为导航链接添加和删除活动类

17 Mar 2025 | 6 分钟阅读

在本文中，我们将通过 jQuery 和 JavaScript 来了解如何为导航链接添加和移除 active 类。

什么是 jQuery？

jQuery 是一个快速、轻量级、小巧且功能丰富的 JavaScript 库。要将 jQuery 添加到 HTML 页面，我们可以使用 <script> 标签。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>

以下方法可用于为导航链接添加和移除 active 类。

addClass() 方法

此方法将一个或多个类名添加到选定的元素。如果我们想添加多个类，请用空格分隔类名。

语法

以下是 addClass() 方法的语法

在上述语法中，classname 是必需的，function(index,currentclass) 是可选的。

removeClass() 方法

此方法从选定的元素中移除一个或多个类名。如果 removeClass() 方法没有指定参数，它将从选定的元素中移除所有类名。

语法

以下是 removeClass() 方法的语法

在上述语法中，classname 是可选的，function(index,currentclass) 也是可选的。

让我们看一些为选定的导航链接添加和移除 active 类的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> Add active class on Navigation link </title>
<style>
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 20px;
   font-family: cursive;
}
.active {
  background-color: #666;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  color: white;
}

.btn:hover {
  background-color: #666;
  color: white;
}
body {
  text-align: center;
 font-family: 'Raleway',monospace;
  background-color: #f6f6f6;
}
h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s; 
}
p {
  position: relative;
  padding: 0;
  margin: 20;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  color: rgb(4, 110, 4);
}
#myDIV {
margin: 50px auto 20px auto;
  padding: 10px;
  border-bottom: 2px solid #eee;
  width: 500px;
  }
  #myDIV a {
  font-family: 'Lato';
  text-decoration: none;
  font-size: 26px;
  color: #000;
  font-weight: 900;
  margin: 0 20px 0 0;
  position: relative;
}
#myDIV a:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000;
  content: '';
  -webkit-transform: translateY(8px);
  opacity: 0;
  transition-property: -webkit-transform, opacity;
  transition-duration: .3s;
}

#myDIV a:hover:before {
  -webkit-transform: translateY(0);
  opacity: 1;
}
</style>
</head>
<body>
<h1> Example </h1>
<p> Add active class on Navigation link </p> 
<div id="myDIV">
  <button class="btn"> <a href=?#?> Home </a> </button>
  <button class="btn"> <a href=?#?> About </a> </button>
  <button class="btn"> <a href=?#?> Contact Us </a> </button>
  <button class="btn"> <a href=?#?> Gallery </a> </button>
  <button class="btn"> <a href=?#?> Products </a> </button>
  <button class="btn"> <a href=?#?> Blog </a> </button>
  <button class="btn"> <a href=?#?> Services </a> </button>
</button>
</div>
<script>
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if (current.length > 0) { 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}
</script>
</body>
</html>

说明

在上面的示例中，我们已为选定的导航链接添加和移除了 active 类。当我们点击特定的导航链接时，active 类将被添加到选定的菜单中。

输出

以下是此示例的输出。

Add and remove the active class from a navigation link

示例 2

<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Add and remove active class on Navigation link </title>
<style>
body {
   font-family: sans-serif;
  max-width: $wrapper-max-width;
  margin: 0 auto;
  padding: 30px;
  font-family: 'Maven Pro', sans-serif;
  text-align: center;
}
.container {
 max-width: 960px;
  margin: 0 auto;
}
h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s; 
}
p {
  position: relative;
  padding: 0;
  margin: 20;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  color: rgb(4, 110, 4);
}
nav ul li {
  list-style: none;
  float: left;
  padding-right: 20px;
   font-family: 'Lato';
  text-decoration: none;
  font-size: 18px;
  color: #000;
  font-weight: 300;
  margin: 0 2px;
}
nav ul li a {
  text-decoration: none;
  color: #222;
  background-color: #ccc;
  padding: 10px 5px;
   font-family: 'Lato';
  text-decoration: none;
}
.active {
  background-color: #d90000;
  color: #fff;
}
</style>
<body>
<h1> Example </h1>
<p> Add and remove active class on Navigation link </p>
  <div class="container">
      <nav class="navecation">
       <ul id="navi">
    <li> <a class="menu active" href="#"> About </a> </li>
    <li> <a class="menu" href="#"> Gallery </a> </li>
         <li> <a class="menu" href="#"> Services </a> </li>
    <li> <a class="menu" href="#"> Contact Us </a> </li>          
    <li> <a class="menu" href="# "> Read Our Blog </a> </li>
  </ul>
    </nav>
  </div>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
 $(document).ready(function() {
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});
</script>
</body>
</html>

说明

在上面的示例中，我们已为选定的导航链接添加和移除了 active 类。当我们点击特定的导航链接时，active 类将被添加到选定的菜单中。

输出

以下是此示例的输出

示例 3

<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="viewport"
		content="width=device-width, initial-scale=1.0">
<title> Add and remove active class on Navigation link </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  margin: 0;
  text-align: center;
}
.navigation ul {
  list-style: none;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  background: #fff;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.navigation ul li {
  text-align: left;
  vertical-align: middle;
}
.navigation ul li a {
  color: #303030;
  width: 200px;
  text-decoration: none;
  display: inline-block;
  padding: 12px 25px;
}
.navigation ul li.active a {
  background: #303030;
  color: #fff ;  
}
.navigation ul li:hover a {
  background: #303030;
  color: #fff ;  
}
h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s; 
}
p {
  position: relative;
  padding: 0;
  margin: 20;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  color: rgb(4, 110, 4);
}
.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}
.tags li {
  float: left; 
}
.tag {
  background: #eee;
  border-radius: 3px 0 0 3px;
  color: #999;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}
.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}
.tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #eee;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}
.tag:hover {
  background-color: crimson;
  color: white;
}
.tag:hover::after {
   border-left-color: crimson; 
}
</style>
</head>
<body>
<h1> Example </h1>
<p> Add and remove active class on Navigation link </p>
<div class="navigation">
    <ul>
    <li class="active"> <a href="#" class="tag"> Home </a> </li>
    <li> <a href="#" class="tag"> About </a> </li>
    <li> <a href="#" class="tag"> Service </a> </li>
    <li> <a href="#" class="tag"> Blog </a> </li>
    <li> <a href="#" class="tag"> Portfolio </a> </li>
    <li> <a href="#" class="tag"> Contact </a> </li>    
  </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).on('click', '.navigation ul li', function(){
  $(this).addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>

说明

在上面的示例中，我们已为选定的导航链接添加和移除了 active 类。当我们点击特定的导航链接时，active 类将被添加到选定的菜单中。

输出

以下是此示例的输出

下一主题集合的基数

为导航链接添加和删除活动类

什么是 jQuery？

addClass() 方法

removeClass() 方法

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

为导航链接添加和删除活动类

什么是 jQuery？

addClass() 方法

removeClass() 方法

示例 1

示例 2

示例 3

相关帖子

焦虑症的自然疗法

VLAN 标记 vs 未标记

敏捷方法论的优缺点

支票类型

学生管理系统

什么是 ENT

自动化测试的优缺点

功率公式

领导力的优缺点

Dropbox 的用途

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器