[英]Navbar active class is not working in bootstrap 4
我試圖將活動類添加到導航欄中當前打開的鏈接中。 我已經用Google搜索了很多。 在Stack Overflow中也有很多與此問題類似的問題,也有答案,但是這些所有答案僅適用於導航欄的哈希類型,例如href="#"
,當我擁有網站和頁面時不起作用。 我想正確添加活動班級。 我已經嘗試了很多,但是沒有找到完美的答案。
這是我的代碼:
<nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0">
<div class="container nav_container">
<a class="navbar-brand" href="<?php echo BASE_URL; ?>">
<img src="<?php echo BASE_URL; ?>/resources/assets/img/logo/logo_default.png" class="img-fluid foodbox_logo">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="<?php echo BASE_URL; ?>">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/shop.php">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/cart.php">Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/about-us.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo BASE_URL; ?>/contact-us.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
JS:
<script>
$(document).ready(function() {
$('a.nav-link').on('click', '.nav-item a', function (e) {
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
</script>
有人可以幫幫我嗎?
使用以下代碼段,並在導航欄中網址的末尾添加/
。
$(document).ready(function() {
var url = [location.protocol, '//', location.host, location.pathname].join('');
$('.nav-item.active').removeClass('active');
$('.nav-item a[href="' + url + '"]').parent().addClass('active');
$(this).parent().addClass('active').siblings().removeClass('active');
});
您可以嘗試以下代碼。
$(document).ready(function() {
$('.nav-link').on('click', '.nav-item a', function (e) {
$('.navbar-nav .nav-link').find(".active").removeClass("active");
$(this).parent().addClass('active');
});
});
jQuery的定義不正確。 在您的代碼中,它試圖在a.nav-link
找到一個nav-item a
,但找不到任何內容。 只需監視點擊以獲取a.nav-link
。 詳情請看這里
$(document).ready(function() { /* Temporarily disable hyperlinks to see menu work */ $('a').attr("href", "#"); $('a.nav-link').on('click', function(e) { $(this).parent().addClass('active').siblings().removeClass('active'); }); });
nav { background-color: red; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md navbar-dark sticky-top pt-0 pb-0"> <div class="container nav_container"> <a class="navbar-brand" href="<?php echo BASE_URL; ?>"> <img src="<?php echo BASE_URL; ?>/resources/assets/img/logo/logo_default.png" class="img-fluid foodbox_logo"> </a> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainNavbar"> <ul class="navbar-nav ml-auto"> <!-- Put class active at the correct level --> <li class="nav-item active"> <a class="nav-link" href="<?php echo BASE_URL; ?>">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo BASE_URL; ?>/shop.php">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo BASE_URL; ?>/cart.php">Cart</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo BASE_URL; ?>/about-us.php">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo BASE_URL; ?>/contact-us.php">Contact Us</a> </li> </ul> </div> </div> </nav>
我已經測試了此代碼,並且可以正常工作。 我稍微改變了選擇器。 試一試,看看它是否對您有用。 當您可以簡單地使用下面的選擇器訪問導航中的每個錨點時,向每個錨點添加導航鏈接類是多余的。
然后,我遍歷了您的導航錨,並刪除了活動類,並將活動類附加到了單擊的項上。
$(document).ready(function() {
$(".navbar-nav li a").on('click', function (e) {
$(".navbar-nav li").find('a').removeClass('active');
$(this).addClass('active');
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.