Home
      
About
      
Contact
    
  
  
  
  


  
  

接下来，我们需要编写一个 JavaScript 函数，用于在点击导航栏链接时加载相应的页面内容。这个函数将获取页面的 URL（通过 window.location.href），并使用 jQuery 的 load() 方法将相应的页面内容插入到我们的内容容器中。

function loadContent() {
  var url = window.location.href;
  $('#content').load(url + ' #content');
}

最后，我们需要为导航栏链接添加 click 事件，以便在点击链接时调用 loadContent() 函数并加载相应的页面内容。

$(document).ready(function() {
  $('#nav-bar a').click(function(e) {
    e.preventDefault(); // 防止链接默认跳转
    var url = $(this).attr('href');
    window.history.pushState('', '', url); // 更新浏览器 URL
    loadContent(); // 加载页面内容
  });
});

这样，当用户点击导航栏链接时，loadContent() 函数将获取链接的 URL，并使用 jQuery 的 load() 方法在内容容器中加载相