[英]How can I make the active navbar link change background color? Bootstrap 4.
[英]How do I make Bootstrap navbar change active state?
我是 HTML 和 JavaScript 的新手,現在我面臨一個問題,我認為你們中的許多人一直在處理自己的問題。
我有一個導航欄,當我單擊不同的頁面引用時,默認情況下它不會更改活動狀態。
“主頁”導航項默認處於活動狀態,我想在單擊其他導航項時更改活動狀態。 但我不知道該怎么做? 據我所知,這不是太多的代碼行,但我很想在這里得到一些幫助。
這是我的代碼:
<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 或 uploads.html 這段代碼更改單擊項目的活動類。
編輯 1:
對於靜態頁面(或由 php 提供),您不需要任何額外的 js 代碼,但是您應該將導航調整為如下例所示(查看“活動”類所在的位置,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>
圖書館.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>
上傳.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>
關於.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>
我認為最簡單的解決方案是檢查窗口location
對象中的pathname
並相應地更改 nabber 狀態。
像這樣的事情會起作用:
var pathname = window.location.pathname,
pages = ['home', 'library', 'uploads','about'];
$('.nav-item').each(function(i) {
if (pathname.includes(pages[i])) this.addClass('active');
else if (this.className.includes('active')) this.removeClass('active');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.