jquery高亮显示当前页

jQuery 高亮显示当前页是一种常见的网页导航效果，用于指示用户当前所在的页面。以下是关于这个问题的详细解答：

基础概念

高亮显示当前页通常通过在导航菜单中为当前页面的链接添加一个特殊的样式（如背景色、字体颜色等）来实现。这样可以直观地告诉用户他们当前在哪个页面上。

优势

用户体验提升：用户可以快速识别当前所在页面，减少混淆。
导航清晰：有助于用户理解网站结构，方便他们进行页面间的跳转。
美观性：通过不同的视觉效果增强页面的整体美感。

类型

基于URL匹配：通过比较当前页面的URL与导航链接的href属性来确定哪个链接应该被高亮。
基于页面标识：在HTML中使用特定的类或ID来标记当前页面，然后在JavaScript中进行匹配。

应用场景

网站导航栏：在网站的顶部或侧边栏导航中。
面包屑导航：显示用户当前位置的层次结构。
分页控件：在列表页面的分页导航中。

示例代码

以下是一个简单的jQuery示例，展示如何根据URL高亮显示当前页的导航链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight Current Page</title>
    <style>
        .active {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>

    <script>
        $(document).ready(function() {
            // 获取当前页面的URL路径
            var currentPath = window.location.pathname;

            // 遍历所有导航链接
            $('nav a').each(function() {
                // 如果链接的href属性与当前路径匹配
                if ($(this).attr('href') === currentPath) {
                    // 添加active类
                    $(this).addClass('active');
                }
            });
        });
    </script>
</body>
</html>