导航栏选中js

在网页开发中，导航栏选中状态通常通过JavaScript来实现，以提供用户当前所在页面的视觉反馈。以下是关于导航栏选中状态的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案：

基础概念

导航栏选中状态是指在导航栏中高亮显示当前用户所在的页面或功能模块，以便用户清楚地知道他们当前的位置。

优势

用户体验：提高用户体验，让用户更容易理解当前所在位置。
导航清晰：使导航更加清晰，减少用户的迷惑。
可访问性：有助于提高网站的可访问性，特别是对于使用屏幕阅读器的用户。

类型

基于URL匹配：通过JavaScript获取当前URL，并与导航项的链接进行匹配，如果匹配则添加选中样式。
基于路由状态：在使用前端路由框架（如React Router、Vue Router）时，可以根据路由状态来设置选中项。
基于滚动位置：当页面滚动到特定部分时，相应的导航项被选中。

应用场景

单页应用（SPA）
多页应用（MPA）
响应式网站

示例代码

以下是一个基于URL匹配的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Example</title>
<style>
  .nav-item {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
  }
  .nav-item.active {
    background-color: #ddd;
  }
</style>
</head>
<body>
<nav>
  <div class="nav-item" data-link="/">Home</div>
  <div class="nav-item" data-link="/about">About</div>
  <div class="nav-item" data-link="/contact">Contact</div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname;
    document.querySelectorAll('.nav-item').forEach(item => {
      if (item.getAttribute('data-link') === currentPath) {
        item.classList.add('active');
      }
    });
  });
</script>
</body>
</html>