单页应用导航切换的核心思路是把多个内容区块放在同一个HTML文档里，通过控制样式的显示与隐藏来模拟页面跳转。W3CSS框架内置了w3-show和w3-hide两个工具类，分别对应display:block和display:none，配合jQuery的类切换操作就能完成基本效果。不过真正落地时还需要考虑点击事件如何绑定、目标内容如何定位、当前导航如何高亮，以及浏览器后退按钮如何处理。

先搭好导航和内容区块

W3CSS是一个轻量级CSS框架，不像一些前端框架那样依赖复杂的JavaScript组件，它把重点放在预设CSS类上。引入方式可以通过<link>标签加载官方CDN文件。在单页导航场景中，w3-bar和w3-bar-item用来搭建顶部导航，w3-button负责按钮外观，w3-container给内容区块提供内边距。下面是基础HTML结构，三个内容面板初始只有首页显示，其余两个通过w3-hide隐藏。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>jQuery + W3CSS 单页导航</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
  <nav class="w3-bar w3-blue">
    <button class="w3-bar-item w3-button nav-link" data-target="home">首页</button>
    <button class="w3-bar-item w3-button nav-link" data-target="docs">文档</button>
    <button class="w3-bar-item w3-button nav-link" data-target="about">关于</button>
  </nav>
  <div id="home" class="w3-container page-panel w3-show">
    <h2>首页内容</h2>
    <p>这是首页区域。</p>
  </div>
  <div id="docs" class="w3-container page-panel w3-hide">
    <h2>文档内容</h2>
    <p>这里放文档说明。</p>
  </div>
  <div id="about" class="w3-container page-panel w3-hide">
    <h2>关于内容</h2>
    <p>介绍项目信息。</p>
  </div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</body>
</html>

这里每个内容面板都使用了page-panel这个自定义类，方便jQuery统一选中。导航按钮通过data-target属性记录目标面板的ID，按钮点击后只需要读取这个属性，就能确定要显示哪个区块。与使用index索引相比，data-target的写法可读性更好，也便于后续增加或调整导航顺序。

需要注意的是，w3-show和w3-hide的切换本质上是修改display样式，并不会销毁DOM节点。也就是说，所有内容区块始终存在于页面中，只有可见性发生变化。这种方案适合内容量不大、需要频繁切换的场景，但如果面板数量很多且包含大量图片或富文本，初次加载时仍然会消耗较多资源，可以考虑后续结合按需加载优化。

用jQuery绑定点击并切换内容

有了上面的结构，接下来用jQuery给导航按钮绑定click事件。核心操作有两个：一是阻止按钮的默认行为，避免锚点跳转或表单提交；二是通过$(this).data('target')获取目标ID。然后统一隐藏所有.page-panel，再单独显示目标面板。addClass和removeClass可以完成类切换，jQuery也提供了toggleClass，但这里显式控制更清晰，不容易出现状态混乱。

$(function () {
  // 给所有导航按钮绑定点击事件
  $('.nav-link').on('click', function (e) {
    e.preventDefault();
    // 获取目标内容面板的ID
    var target = $(this).data('target');
    // 先隐藏所有内容面板，再显示目标面板
    $('.page-panel').removeClass('w3-show').addClass('w3-hide');
    $('#' + target).removeClass('w3-hide').addClass('w3-show');
    // 导航高亮切换
    $('.nav-link').removeClass('w3-blue');
    $(this).addClass('w3-blue');
  });
});

这段代码中，隐藏和显示借助W3CSS的类实现，不需要额外写CSS。事件绑定使用.on('click', ...)，如果导航按钮是动态添加的，可以将事件委托到父级元素，例如$('.w3-bar').on('click', '.nav-link', function() { ... })，这样新插入的按钮也能自动获得切换能力，而不用重复绑定。

高亮导航同样通过操作W3CSS颜色类完成。示例里使用w3-blue作为选中状态，点击时为当前按钮添加该类，并移除其他按钮的高亮。如果导航有多个颜色层级，也可以换成w3-light-blue或w3-green，保持样式统一即可。需要注意的是，这里把导航按钮的背景色类直接写在了<nav>上，高亮切换时要用removeClass移除其他按钮的w3-blue，否则多个按钮会同时保持蓝色背景。

补充导航高亮与浏览器状态处理

上面的基础版本已经可以实现点击切换，但没有处理浏览器前进后退按钮，也没有在页面加载时根据URL显示对应内容。对于体验要求稍高的单页应用，可以结合location.hash和hashchange事件。通过把导航目标写入URL的hash部分，用户刷新页面或点击后退时仍然能回到之前的内容面板。

$(function () {
  // 根据hash显示对应内容面板
  function showPanelFromHash() {
    var hash = location.hash || '#home';
    var target = hash.substring(1);
    // 判断目标面板是否存在
    if ($('#' + target).length === 0) {
      target = 'home';
      location.hash = '#home';
    }
    $('.page-panel').removeClass('w3-show').addClass('w3-hide');
    $('#' + target).removeClass('w3-hide').addClass('w3-show');
    // 高亮当前导航
    $('.nav-link').removeClass('w3-blue');
    $('.nav-link[data-target="' + target + '"]').addClass('w3-blue');
  }
  // 点击导航时修改hash，触发hashchange
  $('.nav-link').on('click', function () {
    var target = $(this).data('target');
    location.hash = target;
  });
  // 监听hash变化，支持浏览器前进后退
  $(window).on('hashchange', showPanelFromHash);
  // 页面加载时先执行一次
  showPanelFromHash();
});

showPanelFromHash函数先把hash中的目标ID取出来，默认使用home。然后检查该ID对应的面板是否存在，不存在则回退到home并修正hash，避免出现空白内容。切换逻辑和前面的点击版本一致，只是触发时机改成了hash变化。这样点击导航时只需要修改location.hash，剩下的交给hashchange事件处理，逻辑更加集中，也减少了重复代码。

不过hash路由也有局限，例如URL中会出现#符号，如果后续需要做SEO或希望URL更干净，可以升级为History API的pushState和popstate。这部分对简单内容面板来说略重，根据实际需求选择即可。需要注意的是，使用hash时不要在点击事件里既阻止默认行为又修改hash，通常直接修改hash并让hashchange统一处理即可，否则可能会出现hash改变但面板不切换的情况。

以上就是使用jQuery和W3CSS实现单页应用导航内容切换的完整思路。它适合轻量级项目、后台管理面板和移动端原型，不用引入Vue或React这类大型框架，也能获得不错的前端导航体验。