Класс 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. Загрузку данных без перезагрузки страниц.