Класс active в меню на php, присваивание класса при клике

Класс active в меню на php, присваивание класса при клике

Занимаясь натягиванием шаблона на сайт появилась у меня задача , чтобы при клике на меню добавлялся к нему класс ACTIVE. Но вот не задача в html версии все работало, а в на сайте php нет из-за того что страница перезагружалась. Погуглив это дело я пришел к выводу что решении не так уж и много. И так всего варианта 3.
Вариант 1. Скрипт на php И так у каждого раздела есть свое меню. Допустим у нас будет 3 ссылки - Главная Новости и о Сайте у которых названия / или index , news, about. Тогда наше подключенное меню будет выглядеть следующим образом
<div id="nav">
   <ul>
      <li>
          <a <?php echo ($_get['page'] == 'index' || empty($_get[page])) ? "class='active'" : ""; ?>
                 href="index1.php">Главная</a>
     </li>
      <li>
          <a <?php echo ($_get['page'] == 'news') ? "class='active'" : ""; ?>
                  href="index2.php">Новости</a>
     </li>
      <li>
          <a <?php echo ($_get['page'] == 'about') ? "class='active'" : ""; ?>
                  href="index3.php">О сайте</a>
   </li>
   </ul>
</div>
Тут ничего сложного если в параметре глобального массива $_GET['page'] будет содержаться какое либо из параметров то добавляется класс active. Вариант 2.  Массив и Цикл Следующий вариант похожий на первый только с массивом.
<?php foreach($result as $item): ?>
<a href="/link.php?menu=<?php echo $item['id']; ?>"
<?php if($_GET['menu'] == $item['id']) { echo "class='active'";} ?>>
<?php echo $item['name']; ?></a>
<?php endforeach; ?>
Массив $result в котором забиты название меню и их id. Для каждой ссылки создается ссылка с id меню, далее проверяется совпадает содержание глобального массива $_GET['menu'] и id какой либо ссылки. Если параметры совпали  то добавляется класс active. Единственное НО в этом скрипте что если вы тока зашли на сайте и глобального массива еще не существует то класс active не добавится к ссылке Главная. Но это решается путем добавления доп условия при котором если массив не существует то добавлять класс к ссылки с id= 0 (Условный Id ссылки ГЛАВНАЯ, у вас она может быть любая другая, но как правило ссылки Главная первая в списке и нулевая по индексу) Вариант 3. JavaSctipt (Jquery библиотека) В этом варианте JS проверяет параметр href у вашего меню и адресом вашего сайта и сравнивает его с текущем адресом открытой страницы. Если параметры совпадают то добавляется класс ACTIVE к текущей ссылке.
<script>
 $('document').ready(function() {
    $('.menu a').each(function() {
        if ('http://site.ru'+$(this).attr('href') == window.location.href)
        {
            $(this).addClass('active');
        }
    });
});
 </script>
Пример у вас ссылка вида <a href=/news>НОВОСТИ</a>. Скрипт проверяет href параметр добавляя адрес получается site.ru/news и сравнивает адрес в браузере если все ок то добавляет. Опять же таки скрипт не универсален т.к. при каждой смене доменного имени придется лезть и менять адрес сайта. Не каждый этим будет заниматься. До опять если ссылка не имеет не какого адреса кроме домена не будет подствечиваться Главная. я скрипт немного переделал в JS я не силен поэтому сделал пару if
 $('document').ready(function() {
    $('.buttons li a').each(function() {
        if (location.protocol+"//"+location.hostname+'/'+$(this).attr('href') == window.location.href)
        {
            $(this).addClass('active');

        }
         if (location.protocol+"//"+location.hostname+$(this).attr('href') == window.location.href)
        {
            $(this).addClass('active');

        }
    });

});
В этом же скрипте уже ничего менять не надо ссылки универсальны под ссылки из примера.  Единственное что параметр href ссылки на главную будет '/'(слешем).

Вариант 4.

Последний вариант который пришел мне во время написания этой статьи это сделать ваш сайт при помощи JQuery. Загрузку данных без перезагрузки страниц.

Возврат к списку