在當前頁面上設置活動類

我有此導航，但似乎無法找到將.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>

來源

2017-08-30 Berteko

你可以根據你的'頁面'參數設置活動類 – ArtOsi

'*添加.active類*'是什麼意思？你想查找鏈接何時激活？ –

@ Louis'LYRO'Dupont如果我在活動頁面上，我想用一種顏色來看看li元素的「事件」。 – Berteko

您可以使用$_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; 
}

來源

2017-08-30 11:54:31 Jonathan

你也可以用JS來做，但你最終會得到一個非風格的菜單。 – Jonathan

PS - 我注意到你是新來的，歡迎！您可以通過點擊答案左側的灰色複選框來接受最能解決您問題的答案。這可以讓其他人知道你找到了你正在尋找的東西。 – Jonathan

使用您的page參數來檢查已被點擊了什麼鏈接並相應地設置課程。後面的代碼

var page = $_GET['page'];

然後

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

希望這是正確的語法：

例如，你可以在你的腳本的開頭寫這樣的事情。自從我編寫了我的最後一個PHP代碼以來已經有一段時間了。

來源

2017-08-30 11:56:26 theshinylight

可以使用$ _ SERVER [「PHP_SELF」]獲取當前頁面

之後你會比較這當前頁面寬度，你的鏈接，並添加類，如果他們。主動是平等的

<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>

來源

2017-08-30 12:08:05

當前頁如contact.php，about.php活動菜單，我們可以像ASIGN不同的價值$當前頁變量指出錯誤頁面

$currentPage = 'contact'; // current page is contact

在頭secti就像下面一樣

<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>

來源

2017-08-30 13:38:57

在當前頁面上設置活動類

回答

相關問題