我正在尝试使用PHP突出显示当前打开的菜单项。
我的菜单项的HTML
<ul class="menu">
<li><a href="index.php?p=edit-profile&error=message">Edit Profile</a></li>
<li><a href="index.php?p=edit-contact">Edit Contact</a></li>
<li><a href="index.php?p=edit-facilities">Edit Facilities</a></li>
<li><a href="index.php?p=edit-location">Edit Location</a></li>
<li><a href="index.php?p=edit-images">Manage Images</a></li>
</ul>
我是这样在PHP中尝试的:
if ($_SERVER['QUERY_STRING']) {
list($queryString) = explode('&',$_SERVER['QUERY_STRING']);
$openPage = $queryString;
list($key, $value) = explode('=',$openPage);
$currentPage = $value;
// Determine what menu item to be highlight:
switch ($currentPage) {
case 'edit-profile':
$class1 = 'class="active"';
break;
case 'edit-contact':
$class2 = 'class="active"';
break;
case 'edit-facilities':
$class3 = 'class="active"';
-----------
// Default is to include the main page.
default:
$class = 'class=""';
break;
} // End of main switch.
} else {
//Determine The Index page
$path = $_SERVER['PHP_SELF'];
$indexPage = basename($path);
$indexPage = basename($path, '.php');
}
在我的菜单中,我是这样回显这些类的:
<li <?php if(isset($class1)) echo $class1; ?>><a href="index.php?p=edit-profile">Edit Profile</a></li>
<li <?php if(isset($class2)) echo $class2; ?>><a href="index.php?p=edit-contact">Edit Contact</a></li>
这个解决方案对我有用。但我的问题是,如果我有很多页面,我需要在SWITCH case
中使用许多类变量。
谁能告诉我有替代的解决方案,以减少我的PHP代码?
希望有人能帮助我。
谢谢。
一个简单的解决方案是将菜单项存储在映射中,并遍历它们:
$menuItems = [
'edit-profile' => [
'url' => 'index.php?p=edit-profile&error=message',
'name' => 'Edit Profile'
],
'edit-contact' => [
'url' => 'index.php?p=edit-contact',
'name' => 'Edit Contacts'
],
...
]
然后遍历条目。
<ul class="menu">
<?php
foreach($menuItems as $menuItem => $desc) {
// You get $currentPage from the query string
$class = ($currentPage === $menuItem)? 'class="active"': '';
echo '<li '.$class.'><a href="'.$desc['url'].'">'.$desc['name'].'</a></li>';
}
?>
</ul>
这样你就不需要SWITCH case了。
<li <?php if($currentPage=='edit-profile') echo 'class="active"'; ?>><a href="index.php?p=edit-profile">Edit Profile</a></li>
<li <?php if($currentPage=='edit-contact') echo 'class="active"'; ?>><a href="index.php?p=edit-contact">Edit Contact</a></li>
你可以使用数组,然后像这样尝试
if ($_SERVER['QUERY_STRING']) {
list($queryString) = explode('&',$_SERVER['QUERY_STRING']);
$openPage = $queryString;
list($key, $value) = explode('=',$openPage);
$currentPage = $value;
// Determine what menu item to be highlight:
// Store in array, you will be having only one item in array
$class[$currentPage] = 'class="active"';
} else {
//Determine The Index page
$path = $_SERVER['PHP_SELF'];
$indexPage = basename($path);
$indexPage = basename($path, '.php');
}
和菜单可以是
<li <?php if(isset($class['edit-profile'])) echo $class['edit-profile']; ?>><a href="index.php?p=edit-profile">Edit Profile</a></li>
<li <?php if(isset($class['edit-contact'])) echo $class['edit-contact']; ?>><a href="index.php?p=edit-contact">Edit Contact</a></li>
与其这样做,不如将所有菜单项放在一个数组中并循环遍历。
您正在发送带有变量的页面参数。
所以,在发送它自己的时候要控制它。
页面数组将以页面标题作为键,以页面url作为值。
这样,你就不需要单独的变量,循环中的单个变量就可以完成任务。
<?php
$pages = array(); // Get all page titles and urls in array.
$pages['Edit Profile'] = 'edit-profile&error=message';
$pages['Edit Contact'] = 'edit-contact';
$pages['Edit Facilities'] = 'edit-facilities';
$pages['Edit Location'] = 'edit-location';
$pages['Manage Images'] = 'edit-images';
if (! empty($pages)) {
$current = (isset($_GET['p'])) ? $_GET['p'] : '';
?>
<ul>
<?php
foreach ($pages as $title => $url) {
$active = ($current == $url) ? 'active' : '';
?>
<li><a href="index.php?p=<?php echo $url;?>" class="<?php echo $active;?>"><?php echo $title;?></a></li>
<?php
}
?>
</ul>
<?php
}
?>
使用PHP生成您自己的菜单结构,但要突出显示,我们可以使用Jquery。
请看下面的例子:
<style>
.active{ background-color:#3F6}
</style>
<ul class="menu">
<li><a href="testmenu.php">Home</a></li>
<li><a href="testmenu.php?p=edit-profile&error=message">Edit Profile</a></li>
<li><a href="testmenu.php?p=edit-contact">Edit Contact</a></li>
<li><a href="testmenu.php?p=edit-facilities">Edit Facilities</a></li>
<li><a href="testmenu.php?p=edit-location">Edit Location</a></li>
<li><a href="testmenu.php?p=edit-images">Manage Images</a></li>
</ul>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<script>
var aurl = window.location.href; // Get the absolute url
$('.menu li a').filter(function() {
return $(this).prop('href') === aurl;
}).parent('li').addClass('active');
</script>