HTML子页面通用头部实现及导航active类hover样式调整

一、修复Active导航项Hover时的颜色问题 #

通过提高CSS选择器优先级，给带有active类的导航链接单独设置hover样式，覆盖默认的hover效果：

修改你的CSS代码，添加以下样式：

/* 让active状态的导航项hover时保持灰色，取消动画 */
li a.active:hover {
  color: #808080;
  animation: none;
}

完整修改后的CSS：

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');

html body{
  background: #0E1212;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
   font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}

li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #682AE9;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.active {
  color: #808080;
}

/* 新增：修复active项hover问题 */
li a.active:hover {
  color: #808080;
  animation: none;
}

@keyframes example {
  0%   {color: #DBDBDB;}
  100% {color: #622cd8;}
 }

二、页面切换时复用导航头部（repl.it无文件夹场景） #

利用JavaScript动态插入导航栏，实现多页面复用，同时自动标记当前页面的active状态：

1. 创建nav.js文件，内容如下：

// 导航栏HTML结构
const navHTML = `
<ul id='menu'>
  <li><a href="home.html" id="home">.home()</a></li>
  <li><a href="about.html">.about()</a></li>
  <li><a href="stuff.html">.stuff()</a></li>
  <li><a href="apply.html">.apply()</a></li>
</ul>
`;

// 将导航插入到页面顶部
document.body.insertAdjacentHTML('afterbegin', navHTML);

// 自动识别当前页面并设置active类
const currentPage = window.location.pathname.split('/').pop();
const navLinks = document.querySelectorAll('#menu a');

navLinks.forEach(link => {
  if (link.getAttribute('href') === currentPage) {
    navLinks.forEach(l => l.classList.remove('active'));
    link.classList.add('active');
  }
});

2. 修改每个页面的HTML，移除原有的<ul id='menu'>代码，替换为引入nav.js：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="home.css">
  <title>Home</title>
</head>
<body>
  <!-- 移除原导航代码，添加这行引入 -->
  <script src='nav.js'></script>
  
  <!-- 页面其他内容 -->
</body>
</html>

这样所有页面都会共享同一导航栏，切换页面时头部保持一致，且当前页面的导航项会自动激活为灰色状态。

内容的提问来源于stack exchange，提问作者Brady Hirschey