我正在嘗試制作一個動態標題，其中標題鏈接類在頁面更改時自動更新。因此，例如，如果用戶在索引中，則標題上的 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貢獻1829條經驗 獲得超6個贊
根據您的問題，我認為您想在與頁面關聯的導航菜單中添加自定義類
您也可以使用 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 關注
- 133 瀏覽
添加回答
舉報
0/150
提交
取消