Класс 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 type="text/javascript">
$('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. Загрузку данных без перезагрузки страниц.