如何使引导导航栏更改活动状态？ [英] How do I make Bootstrap navbar change active state?
本文介绍了如何使引导导航栏更改活动状态？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是HTML和JavaScript的新手，现在我面临着一个问题，我想你们中的许多人都在处理这个问题。
我有一个导航栏，默认情况下，当我单击不同的页面引用时，它不会更改活动状态。
默认情况下，‘Home’NAV-Item处于活动状态，我想在单击其他NAV-Items时更改活动状态。但我不知道该怎么做？据我所知，这不是太多的代码行，但是我希望在这里得到一些帮助。以下是我的代码：
<head>
<meta charset="UTF-8">
<title>MaU Movie database</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="mumdblogo.png">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html" id="movielogo"><img src="moviefylogo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search Movie!</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search for any movie...">
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="main.js"></script>
</body>
</html>
推荐答案
您可以在代码的末尾执行此操作。就在<script src="main.js"></script>
<script>
$(document).ready(function() {
$( ".mr-auto .nav-item" ).bind( "click", function(event) {
event.preventDefault();
var clickedItem = $( this );
$( ".mr-auto .nav-item" ).each( function() {
$( this ).removeClass( "active" );
});
clickedItem.addClass( "active" );
});
});
</script>
和它们，而不是后跟链接(event.preventDefault())，例如。about.html或ploads.html这段代码更改所单击项目的活动类。
编辑1：
对于静电页面(或已送达，例如php)您不需要任何额外的js代码，但是您应该将nav调整为如下示例所示(查看"active"类在哪里，sr-only span current是可选的，但在示例中放置得很好)。
index.html(您的基代码)
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
Library.html
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="library.html">Library<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
ploads.html
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="uploads.html">Uploads<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
about.html
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
</li>
</ul>
这篇关于如何使引导导航栏更改活动状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
