我在标题中拥有所有页面的基本导航栏.php那么它如何使其处于活动状态,以便人们通过导航栏知道他们在哪个页面上
.HTML
<ul class="menu">
<li><a href="index.php">HOME</a></li>
<li><a href="features.php">SMARTRETAIL FEATURES</a></li>
<li><a href="faq.php">FREQUENTLY ASKED QUESTIONS</a></li>
<li><a href="customers.php">CUSTOMERS</a></li>
<li><a href="contactus.php">CONTACT US</a></li>
<li><a href="userguide.php">USER GUIDE</a></li>
</ul>
.CSS
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.menu li {
float: left;
border-right: 1px solid black;
}
ul.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.menu li a:hover:not(.active) {
background-color: #000000;
}
.active {
background-color: #2676f5;
}
如果 php 参考这里的答案 如何在 php 中设置当前页面"活动"
总之
// set this above the include of the nav
$activePage = "offnungszeiten.php";
$pages = array();
$pages["index.php"] = "Öffnungszeiten";
$pages["features.php"] = "Sauna";
$pages["faq.php"] = "Frauensauna";
$pages["custom.php"] = "Beauty Lounge";
$pages["feiertage.php"] = "Feiertage";
//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;?>
试试这个:
<ul class="menu">
<li><a href="index.php" class="<?php echo ($_SERVER['REQUEST_URI'] == '/index.php') ? 'active':'' ?>">HOME</a></li>
<li><a href="features.php" class="<?php echo ($_SERVER['REQUEST_URI'] == '/features.php') ? 'active':'' ?>">SMARTRETAIL FEATURES</a></li>
<li><a href="faq.php" class="<?php echo ($_SERVER['REQUEST_URI'] == '/faq.php') ? 'active':'' ?>">FREQUENTLY ASKED QUESTIONS</a></li>
<li><a href="customers.php" class="<?php echo ($_SERVER['REQUEST_URI'] == '/customers.php') ? 'active':'' ?>">CUSTOMERS</a></li>
<li><a href="contactus.php" class="<?php echo ($_SERVER['REQUEST_URI'] == '/contactus.php') ? 'active':'' ?>">CONTACT US</a></li>
<li><a href="userguide.php" class="<?php echo ($_SERVER['REQUEST_URI'] == '/userguide.php') ? 'active':'' ?>">USER GUIDE</a></li>