我正在嘗試制作一個動態標頭，其中標頭鏈接類在頁面更改時自動更新。因此，就像如果用戶在索引上，則標題上的 HOME 顯示為紅色，如果他在作品集頁面上，則作品集顯示為紅色，依此類推。我的代碼。<?phpswitch(basename($_SERVER['PHP_SELF'])){ case "index.php": $index_hover = "act-link"; break; case "portfolio.php": $folio_hover = "act-link"; break;}?><style>.act-link {color: red}</style><div class="nav-holder"> <a href="index.php" class="<?php echo $index_hover; ?>">Home</a> <a href="portfolio.php" class="<?php echo $folio_hover; ?>">Folio</a></div>這段代碼按預期工作，但問題說我在標題中有 30 個鏈接，那么它不方便。所以我想讓它動態化，以便它檢測頁面并根據需要進行更新。
1 回答
翻閱古今
TA貢獻1780條經驗 獲得超5個贊
根據您的問題，我認為您想在與頁面關聯的導航菜單中添加自定義類
您也可以使用 php 和 javascript 來完成
使用PHP
<?php
function addActiveClass($page){
$url_array = explode('/', $_SERVER['REQUEST_URI']) ;
$url = end($url_array);
if($page == $url){
echo 'act-link'; //class name in css
}
}
?>
<ul>
<li><a class="<?php addActiveClass('home.php');?>" href="http://localhost/Home.php">Home</a></li>
<li><a class="<?php addActiveClass('aboutus.php');?>" href="http://localhost/aboutus.php">About us</a></li>
<li><a class="<?php addActiveClass('contactus.php');?>" href="http://localhost/contactus.php">Contact us</a></li>
</ul>
在這里，我在每個錨標記 addActiveClass 上添加了函數，它根據傳遞的參數添加類“act-link”
使用javascript(jquery)
$(document).ready(function() {
var pathname = window.location.pathname;
$('ul > li > a[href="'+pathname+'"]').parent().addClass('act-link');
})
<ul class="nav">
<li><a href="/home.php">Home</a></li>
<li><a href="/aboutus.php">About us</a></li>
<li><a href="/contactus.php">Contact us</a></li>
</ul>
我在這里使用了jquery，如果你愿意，你也可以編寫核心js代碼
如果有任何困惑請告訴我
- 1 回答
- 0 關注
- 153 瀏覽
添加回答
舉報
0/150
提交
取消