使用jQuery将Bootstrap 4导航项添加到活动类的方法如下:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active" id="home">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item" id="about">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item" id="services">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item" id="contact">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
addClass()
方法添加active
类。例如,如果要将"Home"导航项设置为活动项,可以使用以下代码:$(document).ready(function() {
$("#home").addClass("active");
});
$(document).ready()
函数来实现。这样,当页面加载完成时,jQuery代码将被执行。完整的示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Nav项添加活动类</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active" id="home">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item" id="about">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item" id="services">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item" id="contact">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script>
$(document).ready(function() {
$("#home").addClass("active");
});
</script>
</body>
</html>
这样,当页面加载完成时,"Home"导航项将被设置为活动项,并显示为选中状态。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云