html — выделение текущей страницы в меню в переполнении стека
Я хотел бы выделить активную страницу в меню, используя php. Страница в статической версии, только общие файлы вызываются с помощью include в php i.e header.php, footer.php, navigation.php
navigation.php
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="contact-us.php">Contact</a></li>
</ul>
</div>
index.php
<?php
// Including Files
include('includes/header.php');
include('includes/navigation.php');
?> Rest HTML code goes here
Решение
PHP
$activePage = basename($_SERVER['PHP_SELF'], ".php");
HTML
<ul class="nav navbar-nav">
<li class="<?= ($activePage == 'index') ? 'active':''; ?>"><a href="index.php">Home</a></li>
<li class="<?= ($activePage == 'contact-us') ? 'active':''; ?>"><a href="contact-us.php">Contact</a></li>
</ul>
Другие решения
Вы должны использовать условное выражение в каждом атрибуте класса li в файле navigation.php. Используйте предопределенную переменную $ _SERVER [«PHP_SELF»], например, для ссылки на контакт:
<li class="<?php $_SERVER['PHP_SELF'] === '/contact-us.php' ? 'active' : '' ?>"><a href="contact-us.php">Contact</a></li>
Вы можете просто добавить соответствующие классы на каждой странице <li> элемент, а затем выделите соответствующую кнопку страницы с некоторыми CSS.
Пример кода:
navigation.php
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="index"><a href="index.php">Home</a></li>
<li class="contact><a href="contact-us.php">Contact</a></li>
</ul>
</div>
index.php
// after php includes
<head>
.index {
color:red;
}
</head>
контакт-us.php
// after php includes
<head>
.contact {
color:red;
}
</head>
…и так далее.
Вы можете использовать следующее:
.active, .home:hover {
background-color: #666;
color: white;
}<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="home active"><a href="index.php">Home</a></li>
<li><a href="contact-us.php">Contact</a></li>
</ul>
</div> Вы даете ссылки ID лайк #activeHome а также #activeContact,
<li><a href="index.php" id="activeHome">Home</a></li>
Затем вы меняете в HTML вы загружаете только в Home например background,
<style>
#activeHome {
background:blue;
}
</style>
На странице Contact соответствующий.