正在为请求为空的导航链接添加活动类

在Web开发中，为请求为空的导航链接添加活动类（通常是指active类）是一种常见的做法，用于指示当前页面或视图与哪个导航链接相关联。这有助于提高用户体验，因为它向用户清晰地展示了他们当前所在的页面。

基础概念

活动类（Active Class）：这是一个CSS类，通常用于样式化当前活动的导航链接。例如，它可能会改变链接的颜色或添加下划线。

请求为空的导航链接：这通常指的是URL中没有参数或特定路径的导航链接，例如首页链接。

类型

基于URL的匹配：根据当前URL与导航链接的匹配情况来添加活动类。
基于路由的匹配：在单页应用（SPA）中，根据当前路由状态来添加活动类。

应用场景

导航菜单：在网站的顶部或侧边栏导航菜单中。
面包屑导航：显示用户当前位置的层次结构。
标签页：在多标签页面中标识当前活动的标签。

示例代码

以下是一个简单的JavaScript示例，展示如何为请求为空的导航链接添加活动类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/" id="home-link">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const links = document.querySelectorAll('nav ul li a');
            const currentPath = window.location.pathname;

            links.forEach(link => {
                if (link.getAttribute('href') === currentPath || link.getAttribute('href') === '/') {
                    link.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>