Hallo, ich habe auf jeder Seite ein Menü auf jeder Seite. Ich möchte es in seine eigene Datei menu.php einfügen, aber ich bin mir nicht sicher, wie ich class = "active" für jede Seite setzen soll, auf der ich gerade bin Hier ist mein Code: Bitte helfen Sie mir
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>
Es wäre einfacher, wenn Sie ein Array von Seiten in Ihrem Skript erstellen und es zusammen mit der aktuell aktiven Seite an die Ansichtsdatei übergeben:
//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;?>
Mit einer Template-Engine wie Smarty würde Ihre menu.php noch schöner aussehen:
//menu.php
{foreach $pages as $url=>$title}
<li>
<a {if $url === $activePage}class="active"{/if} href="{$url}">
{$title}
</a>
</li>
{/foreach}
diese Methode ruft die aktuelle Seite mit PHP ab, wodurch ein Word in diesem Fall aktiv übergeben wird, und platziert es innerhalb des Klassenparameters, um die Seite als aktiv zu setzen.
<?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>
Erstellen Sie eine Variable in jeder Ihrer PHP-Dateien wie:
$activePage = "sauna"; (different for each page)
dann überprüfen Sie diese Variable in Ihrer HTML-Seite wie folgt
<?php if ($activePage =="sauna") {?>
class="active" <?php } ?>
Geben Sie den folgenden Code in menu.php
ein, und es wird alles erledigt.
// function to get the current page name
function PageName() {
return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
$current_page = PageName();
Verwenden Sie die obigen Angaben, um den aktuellen Seitennamen abzurufen, und geben Sie diesen in Ihr Menü ein
<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>
dabei ist active
der Name der Klasse, die Ihren Menüpunkt hervorhebt
Ich habe es mit PHP auf diese Weise gemacht,
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;
}
Und dann diese Funktion aufrufen
echo createTopNav("about");
und die Ausgabe wird so sein
<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>
es gibt zwei Dinge, die Sie tun können.
zuerst können Sie den aktuellen Dateinamen der angeforderten PHP-Datei lesen, indem Sie $_SERVER['PHP_SELF']
oder $_SERVER['REQUEST_URI']
oder eine andere $ _SERVER global -Variable verwenden, die Sie zum Lesen Ihrer aktuellen Seite verwenden können, und sie mit der Link-URL vergleichen diese
<a href="offnungszeiten.php" <?php if($_SERVER['PHP_SELF']=='offnungszeiten.php'){ ?>class="activatepage" <?php } ?> >
Öffnungszeiten
</a>
die zweite besteht darin, eine Variable zu erstellen, die Sie global lesen können, um den aktuellen Namen der aktuellen Seite zu speichern
<?php
$cur_page ="offnungszeiten"
?>
<a href="offnungszeiten.php" <?php if($cur_page=='offnungszeiten'){ ?>class="activatepage" <?php } ?> >
Öffnungszeiten
</a>
Einfache Lösung:
Ausleihen des Codes von asprin
oben;
Erstellen Sie eine neue Datei menu.php
, in der Sie die einzige Kopie des Menüs speichern werden. In dieser Datei erstellen Sie eine Funktion addMenu($pageName)
, die einen Parameter als Seitennamen verwendet und nach dem Hinzufügen des aktuellen Tags eine aus dem Menü bestehende Zeichenfolge zurückgibt.
In Ihrem HTML-Code würden Sie include(menu.php)
und dann die Funktion addMenu
mit dem aktuellen Seitennamen aufrufen. So sieht Ihr Code so aus:
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;
}
?>
Und sagen Sie in Ihrem HTML-Code Folgendes:
<div id="menu">
<?php
include('menu.php');
echo addMenu("index");
echo $hello;
?>
</div>
Ich habe dieses Problem mit jQuery/javascript gelöst, indem ich bei jedem Laden meiner Seite den folgenden Code ausführte:
$(document).ready(function () {
//Get CurrentUrl variable by combining Origin with pathname, this ensures that any url appendings (e.g. ?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');
}
});
});
Diese Implementierung setzt voraus, dass Ihr Menü die 'NavMenu'-ID hat, und verwendet http://hostname/scriptname.php
href-Attribute wie folgt:
<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>
Lesen Sie die JavaScript-Kommentare, um zu sehen, was los ist. Wenn Sie es vorziehen, ein anderes href-Layout zu verwenden (wie in Ihrem ursprünglichen Beispiel), müssen Sie ein wenig mit der CurrentUrl-Variablen spielen, damit das gleiche Layout wie Ihre href-Attribute verwendet wird.
Für mich war dies die einfachste Lösung, da ich über bereits vorhandene Websites mit einem großen Menü und vielen Seiten verfügte und vermeiden wollte, dass alle Seiten geändert werden mussten. Dadurch kann ich in die Header-Datei (die bereits eine zentrale Datei war) JavaScript-Code einfügen, der das Problem für alle vorhandenen Seiten löst.
Ich habe ein einfaches Beispiel, siehe unten:
<?php
function active($currect_page) {
$url = $_SERVER['REQUEST_URI'];
if($currect_page == $url){
echo 'active';
}
}
?>
<ul class="navbar-nav mr-auto">
<li class="nav-item <?php active('/');?>">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item <?php active('/other');?>">
<a class="nav-link" href="/other">Other page</a>
</li>
</ul>
Das hat für mich funktioniert:
function active_page($script){
$actual = basename($_SERVER['PHP_SELF']);
if($script == $actual){
return 'active-page'; //class name in css
}
}
Sie können verwenden
<?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>
Senden Sie den Seitennamen in einer Abfragezeichenfolge und überprüfen Sie ihn auf jeder Seite, indem Sie die Variable abrufen.
Ein bisschen spät am Ball, aber ich musste das selbst lösen und endete mit diese Javascript-Methode , mit einer kleinen Modifikation. Dies hat den Vorteil, dass nicht viele Änderungen am aktuellen Code erforderlich sind. Führen Sie einfach das Skript und voila aus.
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';
}