У меня есть эта навигация, но я не могу найти решение для добавления класса .active на текущую страницу. Может ли кто-нибудь помочь мне здесь?
<nav class="menu">
<ul class="menu-ul navigation">
<div class="menu-first">
<li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
</div>
<div class="menu-second">
<li><a href="index.php?page=events">Events</a></li>
<?php if (empty($_SESSION['user'])): ?>
<li><a href="index.php?page=login">Login</a></li>
<li>/</li>
<li><a href="index.php?page=register">Register</a></li>
<?php else: ?>
<li><a href="index.php?page=logout">Logout</a></li>
<li class="menu-cart">
<a href="index.php?page=cart">Cart (<?php
if(empty($_SESSION['cart'])) {
echo '0';
}else {
echo sizeof($_SESSION['cart']);
};
?>)</a>
</li>
<?php endif; ?>
</div>
</ul>
</nav>
4 ответа
Вы можете использовать $_GET
:
<nav class="menu">
<ul class="menu-ul navigation">
<div class="menu-first">
<li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
</div>
<div class="menu-second">
<li class="<?php echo $_GET['page'] == "events" ? "active" : ""; ?>" ><a href="index.php?page=events">Events</a></li>
<?php if (empty($_SESSION['user'])): ?>
<li class="<?php echo $_GET['page'] == "login" ? "active" : ""; ?>"><a href="index.php?page=login">Login</a></li>
<li>/</li>
<li class="<?php echo $_GET['page'] == "register" ? "active" : ""; ?>"><a href="index.php?page=register">Register</a></li>
<?php else: ?>
<li class="<?php echo $_GET['page'] == "logout" ? "active" : ""; ?>"><a href="index.php?page=logout">Logout</a></li>
<li class="menu-cart <?php echo $_GET['page'] == "cart" ? "active" : ""; ?>">
<a href="index.php?page=cart">Cart (<?php
if(empty($_SESSION['cart'])) {
echo '0';
}else {
echo sizeof($_SESSION['cart']);
};
?>)</a>
</li>
<?php endif; ?>
</div>
</ul>
</nav>
И тогда в CSS вы можете изменить цвет ссылки:
.navigation a {
color: blue;
}
.navigation .active a {
color: red;
}
Вы можете использовать $ _SERVER ['PHP_SELF'] для получения текущей страницы
И после того, как вы сравните эту текущую ширину страницы, ваша ссылка добавит класс .active, если они равны
<nav class="menu">
<ul class="menu-ul navigation">
<div class="menu-first">
<li><a href="index.php"><span class="main-title">X-BIKES</span></a>
</li>
</div>
<div class="menu-second">
<li><a <?= $_SERVER['PHP_SELF'] == 'index.php?page=events' ?
'class="active"' : '' ?> href="index.php?page=events">Events</a></li>
<?php if (empty($_SESSION['user'])): ?>
<li><a href="index.php?page=login">Login</a></li>
<li>/</li>
<li><a href="index.php?page=register">Register</a></li>
<?php else: ?>
<li><a href="index.php?page=logout">Logout</a></li>
<li class="menu-cart">
<a <?= $_SERVER['PHP_SELF'] == 'index.php?page=cars' ?
'class="active"' : '' ?> href="index.php?page=cart">Cart (<?php
if(empty($_SESSION['cart'])) {
echo '0';
}else {
echo sizeof($_SESSION['cart']);
};
?>)</a>
</li>
<?php endif; ?>
</div>
</ul>
Активное меню для текущей страницы, такой как contact.php, about.php, мы можем сделать переменную, например $ currentpage, с другим значением asign для другой страницы
$currentPage = 'contact'; // current page is contact
В разделе заголовка, как сделать ниже
<ul class="nav">
<li class="<?php if($currentPage =='contact'){echo 'active';}?>" ><a href="contact.php">Contact</a></li>
<li class="<?php if($currentPage =='about'){echo 'active';}?>" ><a href="about.php">About</a></li>
</ul>
Используйте параметр page
, чтобы проверить, по какой ссылке щелкнули, и соответственно установить класс.
Например, вы можете написать что-то вроде этого в начале вашего скрипта:
var page = $_GET['page'];
А потом в вашем коде
<a href="index.php?page=events" <?php if (page == 'events') echo 'class="active"' ?>>Events</a>
Надеюсь, что это правильный синтаксис. Прошло много времени с тех пор, как я написал свой последний PHP-код.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.