@Jesus_newrba

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

Есть меню:
<nav id="menu" class="navbar" >
<li class="nav-item">
            <a href="?page=main">Home </a>
          </li>
          <li class="nav-item">
            <a href="?page=about">About</a>
          </li>
          <li class="nav-item">
            <a href="?page=blog">Blog</a>
          </li>
</nav>

Нужно сделать чтобы на активированном меню у li был класс типа activeted
Как это реализовать при помощи JS ?
  • Вопрос задан
  • 312 просмотров
Решения вопроса 1
Lumore
@Lumore
Front-end developer
<nav id="menu" class="navbar">
   <li class="nav-item" data-page="home">
      <a href="?page=main">Home </a>
   </li>
   <li class="nav-item" data-page="about">
      <a href="?page=about">About</a>
   </li>
   <li class="nav-item" data-page="blog">
      <a href="?page=blog">Blog</a>
   </li>
</nav>
<script>
$(document).ready(function() {
   $('[data-page="<?=$activePage?>"]').addClass('active');
});
</script>

Где $activePage - PHP переменная, которая содержит название активной страницы.
Но лучше, конечно же, делать это на PHP.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
SnaIP
@SnaIP
Front-end разработчик
$( "p" ).click(function() {
  $( this ).toggleClass( "highlight" );
  $("p").removeClass('highlight');
});
// пример с документации
// все просто, подстройте под себя и линка уберите действие по умолчанию
Ответ написан
Комментировать
sergski
@sergski
web-developer
на js например так:
var path = window.location.href;
var str = path.slice( path.lastIndexOf("=") + 1 );

var els = document.querySelectorAll("#menu a"), attr, nameAttr;
Array.prototype.forEach.call(els, function( el ) {
    attr = el.getAttribute('href');
    nameAttr = attr.slice( attr.lastIndexOf("=") + 1 );
    if ( str === nameAttr ) {
        el.classList.add('active');
    }
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы