如何基于带active类的导航栏元素内容隐藏指定页面元素

问题修复方案 #

原有代码存在的问题 #

• if判断语法错误，错误混用三目运算符标识?
• document.querySelector未匹配到元素时返回值为null而非undefined，原有类型判断逻辑不生效
• 直接读取li元素的innerText可能包含多余换行、空格，判断匹配成功率低，优先读取内部a标签的文本内容更稳妥
• 缺少其他导航项激活时恢复目标div显示的逻辑

解决方案代码 #

场景1：导航切换会刷新页面

// 读取激活导航项的a标签元素
const activeNav = document.querySelector('ul.nav > li.active > a')
// 读取要控制的目标div
const targetDiv = document.getElementById('options1')

// 先判断元素存在再执行逻辑，避免控制台报错
if (activeNav && targetDiv) {
  // 激活项为Page1时隐藏div，否则显示
  targetDiv.style.display = activeNav.textContent.trim() === 'Page 1' ? 'none' : 'block'
}

场景2：导航切换无页面刷新（单页应用/标签页切换）

需要额外监听导航切换动作，实时更新div状态：

// 封装状态更新函数
function updateDivStatus() {
  const activeNav = document.querySelector('ul.nav > li.active > a')
  const targetDiv = document.getElementById('options1')
  if (activeNav && targetDiv) {
    targetDiv.style.display = activeNav.textContent.trim() === 'Page 1' ? 'none' : 'block'
  }
}

// 页面加载完成时执行一次
document.addEventListener('DOMContentLoaded', updateDivStatus)

// 绑定所有导航项的点击事件，切换后更新状态
document.querySelectorAll('ul.nav > li > a').forEach(navItem => {
  navItem.addEventListener('click', () => {
    // 加短延时等待active类切换完成再判断
    setTimeout(updateDivStatus, 10)
  })
})

内容的提问来源于stack exchange，提问作者Lazerr Tag