如何通过jQuery/JavaScript实现点击导航选项动态切换对应内容

直接按以下步骤修改代码即可，原有下拉菜单hover交互完全不受影响：

修改点1：给内容容器加唯一标识 #

找到原来的静态内容区块，给它加id="contentArea"方便脚本定位：

<div id="contentArea" style="padding:0 16px">
  <h3>Subnav/dropdown menu inside a Navigation Bar</h3>
  <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>

修改点2：添加交互脚本 #

把以下脚本放在</body>标签前即可，不需要引入额外第三方库，用原生JavaScript实现：

// 定位内容展示容器
const contentBox = document.getElementById('contentArea');
// 选中所有可点击的导航项：包含一级导航、下拉子菜单、下拉父按钮
const navItems = document.querySelectorAll('.navbar a, .subnav .subnavbtn');

navItems.forEach(item => {
  item.addEventListener('click', function(e) {
    // 阻止a标签默认的锚点跳转行为
    e.preventDefault();
    // 提取当前点击的导航名称，自动过滤下拉箭头等多余字符
    const navName = this.textContent.trim().split(/\s+/)[0];
    // 动态替换内容区文本
    contentBox.innerHTML = `
      <h3>你已点击「${navName}」</h3>
      <p>当前为${navName}对应的内容区块，可根据业务需求替换为任意文本、组件或异步加载的数据。</p>
    `;
  })
})

可选扩展（自定义各导航独立内容） #

如果不需要统一的提示模板，要给每个导航配置完全不同的内容，可以用映射表的方式实现，示例：

// 提前配置各导航锚点对应的内容
const contentMap = {
  '#home': '<h3>首页</h3><p>欢迎访问站点首页</p>',
  '#company': '<h3>公司介绍</h3><p>我们成立于20xx年，主营xxx业务</p>',
  '#team': '<h3>团队介绍</h3><p>团队成员均来自行业头部公司</p>',
  '#contact': '<h3>联系我们</h3><p>邮箱：xxx@xxx.com</p>'
  // 其余导航项按相同格式补充即可
};

// 修改点击时的渲染逻辑
navItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    // 只有a标签有hash属性，下拉按钮点击时可以单独处理
    const targetHash = this.hash;
    if(targetHash && contentMap[targetHash]) {
      contentBox.innerHTML = contentMap[targetHash];
    }else {
      const navName = this.textContent.trim().split(/\s+/)[0];
      contentBox.innerHTML = `<h3>你已点击「${navName}」</h3><p>该板块内容待补充</p>`;
    }
  })
})

jQuery版本实现 #

如果项目里已经引入了jQuery，可以用更简洁的写法实现相同效果：

$(function() {
  $('.navbar a, .subnav .subnavbtn').click(function(e) {
    e.preventDefault();
    const navName = $(this).text().trim().split(/\s+/)[0];
    $('#contentArea').html(`
      <h3>你已点击「${navName}」</h3>
      <p>当前为${navName}对应的内容区块，可根据业务需求替换为任意文本、组件或异步加载的数据。</p>
    `)
  })
})

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