Member 12622327 Ответов: 1

Как использовать интерактивную строку меню в header.php?

Мне нравится держать свой логотип и строку меню в header.php так что, таким образом, это не такая уж боль, чтобы обновить его. Однако я только что добавил интерактивность в свою строку меню, и для каждой страницы я должен добавить active в класс css.

Мой код меню для домашней страницы: 
<ul> 
<li><a class="menubar active" href="index.php">Home</a></li> 
<li><a class="menubar" href="scores.php">Scores</a></li> 
<li><a class="menubar" href="players.php">Our Eagles</a></li> 
<li><a class="menubar" href="schedule.php">Game Schedule</a></li> 
</ul>


Что я уже пробовал:

Я еще ничего не пробовал, потому что даже не знаю, возможно ли это.

1 Ответов

Рейтинг:
9

Peter Leow

Конечно, это возможно.
Первым делом удалите "активный" класс из главного меню.
Для этого вам нужно будет написать код javascript. Когда страница загружена, код найдет строку меню ссылка, соответствующая текущему url-адресу страницы, и добавление к ней активного класса.
Взять справку из Как добавить активный класс В навигационное меню на основе URL-адреса[^].
Подумайте, куда поместить код css и javascript, чтобы они были написаны только один раз и просто включались в каждую страницу.
В качестве примера я добавил код javascript в header.php.

<ul> 
<li><a class="menubar" href="index.php">Home</a></li> 
<li><a class="menubar" href="scores.php">Scores</a></li> 
</ul>
<script>
function addClass(){
  //Get the current page url	
  var pageurl = window.location.href;
  //Find all the anchor links with class name 'menubar'
  var menubar = document.getElementsByClassName('menubar');
  //Loop thru them to find the matching anchor link
  for(i=0;i<menubar.length;i++) { 
    //When the matching anchor link found
    if(menubar[i].href.toLowerCase()==pageurl.toLowerCase())    {
	  //Add 'active' to the existing class of the found anchor link
      menubar[i].className +=' active';
    }
  }
}
window.onload(addClass());
</script>

Member 12622327

Спасибо