У меня есть небольшой веб-сайт с 5 разделами навигации.
Чтобы избежать изменения кода на каждой странице, когда мне нужно добавить еще несколько разделов, я использую php include в разделе nav каждой страницы.
Теперь мне нужно добавить класс «selected» в элемент списка (li) в зависимости от посещенной страницы. ¿Как это сделать? Потому что теперь nav уникален.
Это код
<nav> <ul> <li class="selected"><a href="index.php">Home</a></li> <li><a href="biography.php">Bio</a></li> <li><a href="photo.php">Photo</a></li> <li><a href="work.php">Work</a></li> <li class="last"><a href="contact.php">Contact</a></li> </ul> <div class="clear"></div> </nav> Благодаря!
Вот простой способ сделать это, чистый CSS не нужен для программирования: добавьте идентификатор в свое тело и свои ссылки:
<body id='home'> <nav> <ul> <li id='home-link'><a href="index.php">Home</a></li> <li id='bio-link'><a href="biography.php">Bio</a></li> <li id='photo-link'><a href="photo.php">Photo</a></li> <li id='work-link'><a href="work.php">Work</a></li> <li id='contact-link'class="last"><a href="contact.php">Contact</a></li> </ul> <div class="clear"></div> </nav>
Теперь вы просто так:
#home #home-link, #bio #bio-link, #photo #photo-link, #work #work-link, #contact #contact-link{ //however you would have styled .active }
В структуре URL вы можете использовать $_SERVER['PHP_SELF'] для идентификации текущей страницы.
$nav = array( 'Home' => 'index.php', 'Bio' => 'biography.php', 'Photo' => 'photo.php', 'Work' => 'work.php', 'Contact' => 'contact.php' ); foreach($nav as $nav_title => $nav_link) { echo '<li '.($nav_link == basename($_SERVER['PHP_SELF']) ? 'class="selected"':'').'><a href="'.$nav_link.'">'.$nav_title.'</a></li>'; }
Вот решение, добавьте новые страницы в массив страниц:
<?php $current_page = basename($_SERVER['REQUEST_URI']); $pages = array('index','biography','photo','work','contact'); if(!in_array($current_page,$pages)){$current_page='index';} $menu = "\n<nav>\n\t<ul>\n"; foreach($pages as $link){ $menu.="\t\t<li ".(($link==$current_page)?'class="selected"':'')."><a href=\"".$link.".php\">".(($link=='index')?'Home':ucfirst($link))."</a></li>\n"; } $menu .= "\t</ul>\n\t<div class=\"clear\"></div>\n</nav>"; echo $menu; ?>для<?php $current_page = basename($_SERVER['REQUEST_URI']); $pages = array('index','biography','photo','work','contact'); if(!in_array($current_page,$pages)){$current_page='index';} $menu = "\n<nav>\n\t<ul>\n"; foreach($pages as $link){ $menu.="\t\t<li ".(($link==$current_page)?'class="selected"':'')."><a href=\"".$link.".php\">".(($link=='index')?'Home':ucfirst($link))."</a></li>\n"; } $menu .= "\t</ul>\n\t<div class=\"clear\"></div>\n</nav>"; echo $menu; ?>
Выходы:
<nav> <ul> <li class="selected"><a href="index.php">Home</a></li> <li ><a href="biography.php">Biography</a></li> <li ><a href="photo.php">Photo</a></li> <li ><a href="work.php">Work</a></li> <li ><a href="contact.php">Contact</a></li> </ul> <div class="clear"></div> </nav>
С помощью JQuery вы можете динамически добавлять «текущий» класс родительскому элементу $ ('nav> ul> li> a'), который его абсолютный href приводит к странице, которую вы просматриваете в данный момент.
$(document).ready(function(){ $('nav > ul > li > a').each(function(){ if (window.location.indexOf($(this).prop('href'))!=-1) { $(this).parent().addClass("current"); } }); });
Таким образом, всякий раз, когда меню загружается на страницу, «текущий» класс будет добавлен в нужное место на nav.
Я по-прежнему относительно новичок в php, поэтому не могу сказать, соответствует ли это принципам лучшей практики или взлома, но это работает.
Я знаю, что это старая тема, но у меня есть решение, в котором рассматривается проблема, вызванная Фредериком в «Почте Криса Соболевского».
Предположим, у вас есть заголовок (который содержит ссылки) и шаблон нижнего колонтитула, и вы не хотите создавать новые заголовки для каждой страницы.
Поскольку каждая ссылка выводит нас на новую страницу с уникальным именем страницы, мы можем использовать ее для предоставления идентификатора каждой из ссылок. В качестве альтернативы мы могли бы использовать параметр из $ _GET в зависимости от настройки вашей навигации.
В вашем примере мы могли бы использовать что-то вроде:
<nav> <ul> <li class="selected"><a href="index.php" id="indexLink">Home</a></li> <li ><a href="biography.php" id="biographyLink">Biography</a></li> <li ><a href="photo.php" id="photoLink">Photo</a></li> <li ><a href="work.php" id="workLink">Work</a></li> <li ><a href="contact.php" id="contactLink">Contact</a></li> </ul> <div class="clear"></div> </nav>
Теперь в нашем php-файле мы можем манипулировать DOM, используя любой метод, который мы предпочитаем добавлять и удалять активный класс из текущей активной ссылки.
Помните, что я новичок, поэтому простите меня, если это не самая лучшая практика для манипулирования DOM, но так я подошел к ней:
?php function curPageName() { $pageName = substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1); return trim($pageName, ".php"); } //string to find the active class $classString=' class="activeLink"'; //String to find the current page link $pageString='id="'.curPageName().'Link"'; //String to set the current page link active $activeString='id="'.curPageName().'Link" class="activeLink"'; //load the html from the header file $fileContents=file_get_contents("header.html"); //Remove the old active class $newHtmlContent=str_replace($classString, "", $fileContents); //Set the new active class $newHtmlContent=str_replace($pageString, $activeString, $newHtmlContent); //Save the manipulated HTML file_put_contents("header.html",$newHtmlContent); ?>
Затем просто создайте стиль activeLink в своем CSS, но вы хотите.
У меня возникло соблазн просто найти URL-адрес для изменения DOM файла заголовка, однако, если в документе есть другие ссылки на одну и ту же страницу, мы также не хотим, чтобы они были в стиле. Поэтому я приложил все усилия, чтобы добавить идентификатор. Это также лучше, если мы используем некоторые другие методы манипулирования DOM в php.
Любые отзывы о том, хорошо ли это решение или плохая практика, тоже оценены!
$ page = ""; ?> <ul> <? php if ($ page = "home") echo "<li class = 'selected'> <a href='home.html'> home </a> </ li> <li> < a href = 'bio.html'> bio </a> </ li> <li> <a href='contact.html'> контакт </a> </ li> "; else if ($ page = "bio") echo "<li> <a href='home.html'> home </a> </ li> <li class = 'selected'> <a href = 'bio.html '> bio </a> </ li> <li> <a href='contact.html'> контакт </a> </ li> "; else if ($ page = "content") echo "<li> <a href='home.html'> home </a> </ li> <li> <a href='bio.html'> bio </ a> </ li> <li class = 'selected'> <a href='contact.html'> контакт </a> </ li> ";
это действительно грубо, и есть миллион лучших способов закодировать это, я уверен, но здесь вы идете.