Привет, У меня есть меню на моем сайте на каждой странице, я хочу поместить его в свой собственный файл menu.php, но я не уверен, как установить класс = "active" для любой страницы, на которой я включен. Вот мой код: пожалуйста, помогите мне
menu.php:
<li class=" has-sub"> <a class="" href="javascript:;"><i class=" icon-time"></i> Zeiten<span class="arrow"></span></a> <ul class="sub"> <li><a class="" href="offnungszeiten.php">Öffnungszeiten</a></li> <li><a class="" href="sauna.php">Sauna</a></li> <li><a class="" href="frauensauna.php">Frauensauna</a></li> <li class=""><a class="" href="custom.php">Beauty Lounge</a></li> <li><a class="" href="feiertage.php">Feiertage</a></li> </ul> </li>
Было бы проще, если бы вы построили массив страниц в своем скрипте и передали его в файл вида вместе с текущей активной страницей:
//index.php or controller $pages = array(); $pages["offnungszeiten.php"] = "Öffnungszeiten"; $pages["sauna.php"] = "Sauna"; $pages["frauensauna.php"] = "Frauensauna"; $pages["custom.php"] = "Beauty Lounge"; $pages["feiertage.php"] = "Feiertage"; $activePage = "offnungszeiten.php"; //menu.php <?php foreach($pages as $url=>$title):?> <li> <a <?php if($url === $activePage):?>class="active"<?php endif;?> href="<?php echo $url;?>"> <?php echo $title;?> </a> </li> <?php endforeach;?>
С темплатным движком, подобным Smarty, ваш menu.php выглядел бы еще лучше:
//menu.php {foreach $pages as $url=>$title} <li> <a {if $url === $activePage}class="active"{/if} href="{$url}"> {$title} </a> </li> {/foreach}
Создайте переменную в каждом из файлов php, например:
$activePage = "sauna"; (different for each page)
затем проверьте эту переменную на вашей странице html, как это
<?php if ($activePage =="sauna") {?> class="active" <?php } ?>
этот метод получает текущую страницу с использованием php, которая будет передавать слово в этом случае активным и помещает его внутри параметра класса, чтобы установить активную страницу.
<?php function active($currect_page){ $url_array = explode('/', $_SERVER['REQUEST_URI']) ; $url = end($url_array); if($currect_page == $url){ echo 'active'; //class name in css } } ?> <ul> <li><a class="<?php active('page1.php');?>" href="http://localhost/page1.php">page1</a></li> <li><a class="<?php active('page2.php');?>" href="http://localhost/page2.php">page2</a></li> <li><a class="<?php active('page3.php');?>" href="http://localhost/page3.php">page3</a></li> <li><a class="<?php active('page4.php');?>" href="http://localhost/page4.php">page4</a></li> </ul>
Поместите все ниже код в menu.php
и все будет позаботиться.
// function to get the current page name function PageName() { return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1); } $current_page = PageName();
Используйте приведенное выше, чтобы получить текущее имя страницы, а затем поместите это в свое меню
<li><a class="<?php echo $current_page == 'offnungszeiten.php' ? 'active':NULL ?>" href="offnungszeiten.php">Öffnungszeiten</a></li> <li><a class="<?php echo $current_page == 'sauna.php' ? 'active':NULL ?>" href="sauna.php">Sauna</a></li> <li><a class="<?php echo $current_page == 'frauensauna.php' ? 'active':NULL ?>" href="frauensauna.php">Frauensauna</a></li> <li><a class="<?php echo $current_page == 'custom.php' ? 'active':NULL ?>" href="custom.php">Beauty Lounge</a></li> <li><a class="<?php echo $current_page == 'feiertage.php' ? 'active':NULL ?>" href="feiertage.php">Feiertage</a></li>
где active
– это имя класса, в котором будет отображаться ваш пункт меню
есть две вещи, которые вы можете сделать.
сначала вы можете прочитать текущее имя файла php-файла, который вы запрашиваете, используя $_SERVER['PHP_SELF']
или $_SERVER['REQUEST_URI']
или любые другие глобальные переменные $ _SERVER, которые вы можете использовать для чтения вашей текущей страницы и сравнить ее с URL ссылки, что-то вроде этого
<a href="offnungszeiten.php" <?php if($_SERVER['PHP_SELF']=='offnungszeiten.php'){ ?>class="activatepage" <?php } ?> > Öffnungszeiten </a>
вторая – создать переменную, которую вы можете читать глобально, чтобы сохранить текущее имя текущей страницы, например
<?php $cur_page ="offnungszeiten" ?> <a href="offnungszeiten.php" <?php if($cur_page=='offnungszeiten'){ ?>class="activatepage" <?php } ?> > Öffnungszeiten </a>
Отправьте имя страницы в строке запроса и проверьте ее на каждой странице, получив переменную.
Я сделал это с php таким образом,
function createTopNav($active) { $pages = array( array( 'name'=>'Home', 'link'=>'index' ), array( 'name'=>'Smartphone', 'link'=>'smartphone' ), array( 'name'=>'Tablet', 'link'=>'tablet' ), array( 'name'=>'About Us', 'link'=>'about' ), array( 'name'=>'Contact Us', 'link'=>'contact' ) ); $res = "<ul>"; $activePage = ""; foreach($pages as $key=>$val) { if($val['link']==$active) { $res.= "<li><a href='".$val['link']."' class='active' >".$val['name']."</a></li>"; } else { $res.= "<li><a href='".$val['link']."'>".$val['name']."</a></li>"; } } $res.="</ul>"; return $res; }
И затем, чтобы вызвать эту функцию
echo createTopNav("about");
и выход будет таким:
<ul> <li><a href="index">Home</a></li> <li><a href="smartphone">Smartphone</a></li> <li><a href="tablet">Tablet</a></li> <li><a href="about" class="active">About Us</a></li> <li><a href="contact">Contact Us</a></li> </ul>
Простое решение:
Заимствование кода из asprin
выше;
Создайте новый файл menu.php
где вы сохраните одну и только копию меню. В этом файле вы создадите функцию addMenu($pageName)
которая принимает параметр в качестве имени страницы и возвращает строку, состоящую из меню, после добавления текущего тега.
В вашем коде HTML вы должны include(menu.php)
а затем вызвать функцию addMenu
с именем текущей страницы. Таким образом, ваш код будет выглядеть так:
menu.php
<?php function addMenu($pageName){ $menu = '<ul> <li><a href="Öffnungszeiten.php"' . ($pageName == "Öffnungszeiten" ? "class=\"current\"" : "") . '><span>Öffnungszeiten</span></a></li> <li><a href="sauna.php"' . ($pageName == "Öffnungszeiten" ? "class=\"current\"" : "") . '><span>Sauna</span></a></li> <li><a href="frauensauna.php"' . ($pageName == "Frauensauna" ? "class=\"current\"" : "") . '><span>Frauensauna</span></a></li> <li><a href="custom.php" ' . ($pageName == "lounge" ? "class=\"current\"" : "") . '><span>Beauty Lounge</span></a></li> <li><a href="Feiertage.php"' . ($pageName == "feiertage" ? "class=\"current\"" : "") . '><span>Feiertage</span></a></li> </ul>'; return $menu; } ?>
И в своем HTML, скажем так:
<div id="menu"> <?php include('menu.php'); echo addMenu("index"); echo $hello; ?> </div>
в<div id="menu"> <?php include('menu.php'); echo addMenu("index"); echo $hello; ?> </div>
Я решил это с помощью jQuery / javascript, выполнив код ниже каждый раз, когда загружается любая страница:
$(document).ready(function () { //Get CurrentUrl variable by combining origin with pathname, this ensures that any url appendings (eg ?RecordId=100) are removed from the URL var CurrentUrl = window.location.origin+window.location.pathname; //Check which menu item is 'active' and adjust apply 'active' class so the item gets highlighted in the menu //Loop over each <a> element of the NavMenu container $('#NavMenu a').each(function(Key,Value) { //Check if the current url if(Value['href'] === CurrentUrl) { //We have a match, add the 'active' class to the parent item (li element). $(Value).parent().addClass('active'); } }); });
Эта реализация предполагает, что ваше меню имеет идентификатор «NavMenu» и использует атрибуты http://hostname/scriptname.php
href следующим образом:
<ul id="NavMenu"> <li><a href="http://localhost/index.php">Home</a></li> <li><a href="http://localhost/smartphone.php">Smartphone</a></li> <li><a href="http://localhost/tablet.php">Tablet</a></li> <li><a href="http://localhost/about.php" class="active">About Us</a></li> <li><a href="http://localhost/contact.php">Contact Us</a></li> </ul>
Прочтите комментарии javascript, чтобы узнать, что происходит. Если вы предпочитаете использовать другой макет href (например, в вашем исходном примере), вам нужно немного поиграть с переменной CurrentUrl, чтобы заставить его использовать тот же макет, что и ваши атрибуты href.
Для меня это было самым простым решением, так как у меня были существующие сайты с большим меню и многими страницами, и мне хотелось избежать изменения всех страниц. Это позволяет мне вставить код javascript в файл заголовка (который уже был центральным файлом), который решает проблему для всех существующих страниц.
Немного поздно на балу, но я просто должен был решить это сам и в итоге использовал этот метод Javascript с небольшой модификацией. Это имеет то преимущество, что не требует много изменений в текущем коде, просто запустите скрипт и вуаля.
window.onload = activateCurrentLink; function activateCurrentLink(){ var a = document.getElementsByTagName("A"); for(var i=0;i<a.length;i++) if(a[i].href == window.location.href.split("#")[0]) a[i].className = 'activelink'; }
Вы можете использовать
<?php function active($current_page){ $page = $_GET['p']; if(isset($page) && $page == $current_page){ echo 'active'; //this is class name in css } } ?> <ul> <li><a class="<?php active('page1');?>" href="?p=page1">page1</a></li> <li><a class="<?php active('page2');?>" href="?p=page2">page2</a></li> <li><a class="<?php active('page3');?>" href="?p=page3">page3</a></li> <li><a class="<?php active('page4');?>" href="?p=page4">page4</a></li> </ul>