Как сделать подсветку активного пункта меню?

Question

[Антон]

Как сделать подсветку активного пункта меню, тоесть что бы либо при клике на пункт, либо при скроле на нужну страницу, в главном меню, активный пункт менялся?

<ul class="navbar-nav ml-auto">
     <li class="nav-item active"> 
          <a class="nav-link" href="#"><span>Главная</span></a> 
     </li>
     <li class="nav-item"> 
          <a class="nav-link" href="#team"><span>Пункт1</span></a> 
     </li>
     <li class="nav-item"> 
          <a class="nav-link" href="#"><span>Пункт2</span></a> 
     </li>
     <li class="nav-item"> 
          <a class="nav-link" href="#"><span>Пункт3</span></a> 
     </li>
     <li class="nav-item"> 
          <a class="nav-link" href="#"><span>Пункт4</span></a> 
     </li>
</ul>

.navbar {
    min-height: 200px;
    font-size: 16px;
    text-transform: uppercase;
}
.nav-item .nav-link {
    color: #fff !important;
}
.navbar-nav .nav-link span:hover {
    border-bottom: 1px solid #fff;
}
.navbar-nav .active > .nav-link span {
    font-size: 18px;
    line-height: 22px;
    font-weight: bold;
    border-bottom: 2px solid #fff;
    color: #fff !important;
}

Answer 1

[Николай]

Добавлять стиль active к активному элементу nav-item

Comments

[Антон]

Каким образом? У меня изначально класс active у страницы "Главная", как его перемещать?

Answer 2

[Даниил Сухих]

Если нужно что-бы если ты находишься на определённо странице и её пункт в меню подсвечивается то на css это не сделать.

Comments

[Антон]

Мне не принципиально каким способом это делать, главное выполнить задачу, а будет это JS, jQuery или может ещё что-то, это уже не важно...

Answer 3

[Андрей]

Подключите JQuery и bootstrap.min.js, все должно работать "из коробки"
Пример для Bootstrap 3

Comments

[Антон]

У меня и jQuery и Js файл Bootstrap'а подключены, но увы, активным остается главная страница в любом случае, не могу понять почему. У меня Bootstrap 4.

[Андрей]

тогда так https://codepen.io/AndrewHaze/pen/bvXRPZ

[Антон]

Андрей, воо, огромное спасибо, здорово получилось, но есть небольшой нюанс, если прокручивать сайт, то пункт остается активным, даже в области другой страницы, как можно реализовать переключение еще и при прокрутке, заранее благодарен!

[Андрей]

jsfiddle.net/mekwall/up4nu

[Антон]

Андрей, попробовал использовать Js код, поменял там айдишник на свой, но почему-то не хочет работать...