如何使用JavaScript修改导航栏颜色？实现Stack Overflow导航栏点击变色效果

嘿，这个需求我熟！想要把「Questions」选中时的橙色线条替换成自定义颜色效果，其实只需要几步就能搞定，我给你拆解清楚：

核心思路 #

Stack Overflow的导航项选中时，会通过is-selected类触发橙色下划线样式。我们的目标是：

• 自定义「Questions」选中时的文字/背景颜色
• 隐藏原本的橙色下划线
• 确保页面加载和点击时都能触发这个自定义样式

实现代码 #

直接把这段代码复制到浏览器控制台测试，或者放到Tampermonkey之类的脚本工具里长期生效：

// 1. 获取「Questions」导航元素
const questionsNavItem = document.getElementById('nav-questions');

// 2. 注入自定义样式，覆盖默认选中效果
const customStyle = document.createElement('style');
customStyle.textContent = `
  /* 自定义选中时的文字和背景色 */
  #nav-questions.is-selected {
    color: #1976d2; /* 深蓝色，可自行修改 */
    background-color: #e3f2fd; /* 浅蓝背景，可自行修改 */
    border-radius: 4px; /* 可选，让背景边角更圆润 */
    padding: 8px 12px; /* 可选，调整内边距让背景更贴合文字 */
  }
  /* 隐藏原本的橙色下划线 */
  #nav-questions.is-selected::after {
    display: none;
  }
`;
document.head.appendChild(customStyle);

// 3. 页面加载时检测是否在Questions页面，自动应用样式
window.addEventListener('load', () => {
  if (window.location.pathname.includes('/questions')) {
    questionsNavItem.classList.add('is-selected');
  }
});

// 4. 点击「Questions」时即时触发样式（页面跳转前可见）
questionsNavItem.addEventListener('click', () => {
  questionsNavItem.classList.add('is-selected');
});

关键细节解释 #

• 选择器说明：#nav-questions是「Questions」导航项的固定ID，只要Stack Overflow不修改这个ID，代码就能稳定生效
• 颜色自定义：你可以随便修改color和background-color的值，比如换成#2e7d32（深绿）和#e8f5e9（浅绿），完全看你的喜好
• 页面跳转处理：因为点击导航项会刷新页面，所以我们同时做了「页面加载检测」和「点击即时触发」，确保用户在任何场景下都能看到自定义效果

这样就能完美替代原本的橙色线条啦！如果还有其他样式调整的需求，随时提出来~

内容的提问来源于stack exchange，提问作者Keerthi Reddy Yeruva