
如何使用CSS 和jQuery 更改當前頁面的鏈接顏色
問題:
如何更改連結的文字和背景顏色以突出顯示導航中的當前頁面選單?
CSS 解決方案:
對於基本樣式,CSS 提供li 一個選擇器來定位列表項目內的所有連結:
li a {
color: #A60500;
}
li a:hover {
color: #640200;
background-color: #000000;
}然而,這種方法並不能區分目前頁面連結。
jQuery解決方案:
要動態突出顯示當前頁面鏈接,可以使用jQuery 的.each 函數:
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});此程式碼會迭代所有鏈接,檢查它們的href 是否與當前頁面匹配頁面URL,並新增「活動」類別以符合預先定義
注意事項:
以上是如何使用 CSS 和 jQuery 在導覽功能表中突出顯示目前頁面連結?的詳細內容。更多資訊請關注PHP中文網其他相關文章!