如何用JQuery实现点击侧边栏导航切换id为isi的Div外部文件内容

嘿，我来帮你搞定这个需求！要实现点击侧边导航后，把#isi容器里的内容替换成外部文件的内容，我们可以用jQuery的load()方法轻松实现，下面是具体步骤和代码：

步骤1：确保引入jQuery库 #

首先得保证你的页面已经引入了jQuery，你可以用本地文件或者CDN引入，比如在页面的<head>里加这段代码：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

步骤2：修改侧边导航的HTML #

给需要触发内容加载的导航链接添加一个统一的类（比如nav-link），同时保留href属性来指定要加载的文件路径：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="about.html" class="nav-link">About</a>
  <a href="services.html" class="nav-link">Services</a>
  <a href="clients.html" class="nav-link">Clients</a>
  <a href="contact.html" class="nav-link">Contact</a>
</div>
<section id="main">
  <div>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
  </div>
  <div class="row" id="isi"></div>
</section>

（提示：你可以根据自己的实际文件路径修改href里的文件名）

步骤3：编写jQuery事件处理代码 #

在页面底部（或者用$(document).ready()包裹后放在<head>里）添加这段代码，处理导航链接的点击逻辑：

$(document).ready(function() {
  // 给所有带nav-link类的导航链接绑定点击事件
  $('.nav-link').on('click', function(e) {
    // 阻止链接默认的跳转行为
    e.preventDefault();
    // 获取当前点击链接对应的文件路径
    var targetUrl = $(this).attr('href');
    // 把目标文件的内容加载到#isi容器里
    $('#isi').load(targetUrl);
    // 可选：如果点击后需要自动关闭侧边导航，在这里调用closeNav()即可
    closeNav();
  });
});

额外小技巧：加载文件的部分内容 #

如果你不需要加载整个外部文件，只想加载文件里的某一部分内容，可以在load()方法里追加选择器，比如只加载about.html里id为about-content的元素：

$('#isi').load(targetUrl + ' #about-content');

这样就完成啦！点击侧边导航的链接时，#isi里的内容会自动替换成对应文件的内容，而且不会跳转页面~

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