高亮显示当前栏目导航链接的原理是：先获取当前页面的 URL 或标识当前页面的导航链接，在文档加载时，使用 jQuery 添加一个特定的类或样式来高亮当前栏目导航链接。
以下是一个基本的示例，展示如何使用 jQuery 高亮显示当前栏目导航链接。在这个例子中，假设导航链接的 href 属性与当前页面的 URL 匹配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Highlight</title>
<style>
/* 样式用于高亮当前导航链接 */
.current-page {
color: red; /* 修改为您希望的高亮样式 */
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
// 获取当前页面的 URL
var currentUrl = window.location.href;
// 遍历导航链接
$('nav a').each(function() {
var linkUrl = $(this).attr('href');
// 判断导航链接的 href 是否与当前页面的 URL 匹配
if (currentUrl.indexOf(linkUrl) !== -1) {
// 添加高亮类
$(this).addClass('current-page');
}
});
});
</script>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- 其他页面内容 -->
</body>
</html>
通过遍历导航链接，判断每个链接的 href 是否与当前页面的 URL 匹配。如果匹配，就给该链接添加一个特定的类（在这里是 current-page），这个类定义了高亮的样式。可以根据需要调整样式和类名。这个例子中使用了 jQuery 库，确保在页面中引入了 jQuery 库。
本站原创内容，转载请注明来源：https://www.liutonghui.com/188.html
评论列表（0条）
暂无评论