点击banner按钮在div内加载页面的JS实现是否正确？有优化方案吗？

• 重复绑定btnConta点击事件：你给同一个按钮绑定了两个点击回调，一个触发conta.html加载，一个触发页面跳转到index.html，实际点击后页面直接跳转，加载内容的逻辑永远不会执行
• 多余的$(document).ready()嵌套：该方法仅用于监听DOM加载完成事件，写在点击事件的回调函数内没有任何作用，属于冗余代码
• 脚本引入顺序错误：你先引入了自定义的pagInicial.js，再引入jQuery依赖，导致自定义脚本执行时$对象未定义，代码直接报错无法运行
• 语义化问题：导航栏的<a>标签未设置href属性，不符合HTML语义规范，也不会默认展示点击手型样式
• 代码冗余：多个按钮的点击逻辑高度相似，重复绑定事件会增加后续维护成本

优化思路：统一使用jQuery语法、合并相似逻辑、修正引入顺序、修复事件绑定错误，后续新增导航按钮无需修改JS代码，可维护性更强。

修正后HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pág. Inicial</title>
  <link href="pagInicial.css" rel="stylesheet">
  <!-- 先引入第三方依赖，再引入自定义脚本 -->
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script type="module" src="pagInicial.js"></script>
</head>
<body>
  <div class="wrapper">
    <header role="banner">
      <nav>
        <div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div>
        <div class="menu">
          <ul>
            <!-- 给a标签加跳转占位和自定义属性存目标页面路径 -->
            <a class="btn btn1 load-btn" data-page="denuncia.html" href="javascript:void(0)">Denuncias</a>
            <a class="btn btn1 load-btn" data-page="conta.html" href="javascript:void(0)">Conta</a>
            <a id="btnLogout" href="#"><button>Logout</button></a>
          </ul>
        </div>
      </nav>
    </header>
    <div class="content" id="content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p>
    </div>
  </div>
</body>
</html>

优化后JS代码 #

// 所有代码包在ready回调里，确保DOM加载完成后再执行
$(document).ready(function() {
  // 统一绑定所有加载按钮的点击事件，不用逐个绑定
  $(".load-btn").on("click", function() {
    // 取自定义属性里的页面路径
    const targetPage = $(this).data("page");
    // 加载内容到指定容器，用相对路径更灵活，不用写死本地IP
    $("#content").load(targetPage);
  });

  // 如果确实需要点击Conta按钮跳转index页面，再打开这段代码，不需要直接删除即可
  // $("#btnConta").on("click", function() {
  //   window.location.href = "index.html";
  // });
});

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