我试图更改导航栏中的链接处于活动状态时的颜色。因此,基本上,如果我位于“关于”上,我希望导航中的“关于”链接具有与其他链接不同的颜色。另外,我正在使用Bootstrap 4.2.1。
为此,我做了这个:
<nav class="navbar sticky-top navbar-expand-lg container-fluid" id="navbar-main">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse container" id="navbarSupportedContent">
<ul class="container navbar-nav justify-content-around">
<li class="nav-item">
<a class="nav-link" href="../sections/index.php"><span>Accueil</span></a>
</li>
<li class="nav-item">
<a href="../sections/presentation.php" class="nav-link navigation" ><span>Présentation</span></a>
</li>
<li class="nav-item">
<a class="nav-link navigation" href="../sections/historique.php"><span>Historique</span></a>
</li>
<li class="nav-item">
<a class="nav-link navigation" href="../sections/photos.php"><span>Photos des chats</span></a>
</li>
<li class="nav-item">
<a class="nav-link navigation" href="../sections/contact.php"><span>Contact</span></a>
</li>
</ul>
</div>
</nav>
https://jsfiddle.net/Elena_/mwztr37y/4/
但是颜色没有改变,或者当它起作用时,链接以某种方式消失了(我单击它们,但页面没有改变)。
我在这里做错了什么?
感谢您的帮助!
答案 0 :(得分:1)
我找到了一个完全按照我想要的方式工作的解决方案,所以我想分享它! :)
jQuery(function($) {
var path = window.location.href;
$('li a').each(function() {
if (this.href === path) {
$(this).addClass('active');
}
});
});
答案 1 :(得分:0)
您的CSS似乎以a标签为目标,但脚本引用了li标签。
$( document ).ready(function() {
$(".navbar .nav-item.active .nav-link").click(function () {
$(".navbar .nav-item.active .nav-link").removeClass("selected");
$(this).addClass("selected");
return false;
});
});
.navbar {
height: 80px;
background-color: #F7E4E8;
}
.navbar a:hover {
color: black;
text-decoration: underline;
text-underline-position: under;
}
.navbar .active {
color: #0CF;
}
.navbar a {
color: black;
}
.selected {
color: white;
text-decoration: underline;
text-underline-position: under;
}
<nav class="navbar sticky-top navbar-expand-lg container-fluid" id="navbar-main">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse container" id="navbarSupportedContent">
<ul class="container navbar-nav justify-content-around">
<li class="nav-item active">
<a class="nav-link" href="../sections/index.php"><span>Accueil</span></a>
</li>
<li class="nav-item">
<a href="../sections/presentation.php" class="nav-link navigation" ><span>Présentation</span></a>
</li>
<li class="nav-item">
<a class="nav-link navigation" href="../sections/historique.php"><span>Historique</span></a>
</li>
<li class="nav-item">
<a class="nav-link navigation" href="../sections/photos.php"><span>Photos</span></a>
</li>
<li class="nav-item">
<a class="nav-link navigation" href="../sections/contact.php"><span>Contact</span></a>
</li>
</ul>
</div>
</nav>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
$(".navbar .nav-item.active .nav-link").click(function () {
$(".navbar .nav-item.active .nav-link").removeClass("selected");
$(this).addClass("selected");
return false;
});
});
</script>