У меня есть панель навигации, и я надеюсь выделить текст текущей выбранной ссылки. Несмотря на то, что я могу заставить подсветку работать, используя jquery, она подсвечивается только в течение приблизительно 1 секунды, а затем по умолчанию используется обычный цвет.
Моя навигационная панель HTML:
<nav class="navbar">
<div class="container-fluid" width='300px' >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<div class="thumbnail tile tile-medium tile-green">
<a href="BJIA.html" class="fa-links">
<h1 class="tileHeading">Home</h1>
<i class="fas fa-home fa-lg"></i>
</a>
</div>
<div class="thumbnail tile tile-medium tile-green">
<a href="about.html" class="fa-links">
<h1 class="tileHeading">About</h1>
<i class="fas fa-info-circle fa-lg"></i>
</a>
</div>
<div class="thumbnail tile tile-medium tile-green">
<a href="programs.html" class="fa-links">
<h1 class="tileHeading">Programs</h1>
<i class="fas fa-sitemap fa-lg"></i>
</a>
</div>
<div class="thumbnail tile tile-medium tile-orange">
<a href="data.html" class="fa-links">
<h1 class="tileHeading">Data</h1>
<i class="fas fa-database fa-lg"></i>
</a>
</div>
</div>
</div>
</nav>
jquery:
$(document).ready(function(){
var activeNavItem = $('.tileHeading');
activeNavItem.click(function(){
activeNavItem.removeClass('active');
$(this).addClass('active');
});
});
И CSS:
.tileHeading {
font-size:28px !important;
}
.tileHeading.active {
background-color: red
}
Любая помощь приветствуется в отношении того, почему это происходит.