Я в отчаянии, я проверил все подобные вопросы по stackoverflow и перепробовал много решений, найденных в Google, но тщетно ... Я действительно не могу найти работающее решение моей проблемы.
Я разрабатываю сайт с Bootstrap 4 и у меня есть навигационная панель. Когда я нажимаю на одну из навигационных ссылок, я хочу, чтобы у нее был «активный» класс, в то время как другие остаются нормальными. Я не могу выбрать правильные элементы или использовать неправильный код jquery / javascript.
Панель навигации html код (1) находится в отдельном файле header.html, который я загружаю с помощью JS в начале страницы html (2 ) :
(1)
(2)
<script>
$(function() {
$("#header").load("./header.html");
});
</script>
Вот JS Я ставлю в конце страницы html перед тегом </body>:
<script>
$('.navbar .nav-item .navlink').click(function() {
$('.navbar .nav-item').removeClass('active');
$(this).addClass('active');
})
</script>
А вот активный класс css, который я хочу установить для активной навигационной ссылки:
.navbar .nav-item > .nav-link.active {
color:white;
font-weight: 700;
}
Пожалуйста, скажите мне, что я делаю неправильно ...
ОБНОВЛЕНИЕ
Я поставил здесь решение, которое нашел благодаря простому фрагмент (который я адаптировал к своему коду) взят из этого сайта , на который любезно указал мне @NmiDev.
Я добавляю свой пользовательский активный класс в ссылку на панели навигации, на которую нацелен, благодаря разбору href / location:
$("#header").load("./header.html", function(){
$('a[href="' + location.pathname.split("/")[2] + '"]').addClass("active-nav");
});