Установить активный класс на текущей странице

Question

У меня есть эта навигация, но я не могу найти решение для добавления класса .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>

javascript php html css

1

Berteko 30 Авг 2017 в 14:46

Answer 1

Вы можете использовать $_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;
}

4

Jonathan 30 Авг 2017 в 20:34

Answer 2

Вы можете использовать $ _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>

1

abderrahime sanadi 30 Авг 2017 в 12:08

Answer 3

Активное меню для текущей страницы, такой как 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>

0

Navneet Kaushik 30 Авг 2017 в 13:44

Answer 4

Используйте параметр page, чтобы проверить, по какой ссылке щелкнули, и соответственно установить класс.

Например, вы можете написать что-то вроде этого в начале вашего скрипта:

var page = $_GET['page'];

А потом в вашем коде

<a href="index.php?page=events" <?php if (page == 'events') echo 'class="active"' ?>>Events</a>

Надеюсь, что это правильный синтаксис. Прошло много времени с тех пор, как я написал свой последний PHP-код.

1

theshinylight 30 Авг 2017 в 11:56

Установить активный класс на текущей странице

4 ответа

Новые вопросы

javascript