点击菜单时Div元素不显示？求jQuery单页网站内容切换代码排查

我来帮你看看这个菜单切换的问题哈！你现在要做的是点击侧边导航菜单项，展示对应的页面Div而非跳转新页面，但目前点击后Div没反应，咱们一步步拆解可能的问题：

可能的问题点及修复方案 #

1. jQuery加载顺序不对
   你代码里的jQuery引入标签看起来是在自定义代码后面？这会导致$未定义，你的JS代码根本没法执行。要确保jQuery的<script>标签放在你的自定义JS代码之前，或者把所有代码包裹在$(document).ready()里，保证DOM和jQuery都加载完成后再执行逻辑：

   $(document).ready(function() {
       // 你的所有代码都放这里
   });
   

2. 索引匹配的小问题
   你用eq('" + i + "')传了带引号的索引值，虽然jQuery会自动转换，但直接传数字eq(i)更稳妥。另外要确认：.sideNav li的数量和#wrapper里的目标Div数量是一一对应的，不然索引错位会找不到正确的元素。

3. 元素选择器的准确性
   如果#campaignsPage这些Div不是#wrapper的直接子元素，那find("div:eq(i)")可能选中错误的元素。可以改成用children("div")来精准选择直接子元素，或者直接通过ID匹配（更可靠）：
   比如给每个li加个自定义属性data-target="#campaignsPage"，点击时直接根据这个属性找对应的Div：

   <!-- 侧边导航示例 -->
   <ul class="sideNav">
       <li data-target="#campaignsPage">营销活动</li>
       <li data-target="#subscribersPage">订阅用户</li>
       <li data-target="#reportsPage">数据报表</li>
   </ul>
   

   $(document).ready(function() {
       $('#campaignsPage, #subscribersPage, #reportsPage').hide();
       
       $(".sideNav li").click(function() {
           var target = $(this).data('target');
           $(target).show().siblings().hide();
       });
   });
   

额外排查技巧 #

• 打开浏览器开发者工具（按F12），切换到Console面板，看看有没有报错：比如$ is not defined就是jQuery没加载好，Cannot read property 'show' of undefined就是没找到目标元素。

• 可以在点击事件里加console.log()调试：比如console.log($(this).index())看看索引是否正确，console.log($("#wrapper").children("div").eq(index))看看有没有选中对应的Div。

• 如果你的侧边导航是动态生成的（比如AJAX加载），直接用.click()绑定事件会失效，这时候要用事件委托：

  $(document).on('click', '.sideNav li', function() {
      var index = $(this).index();
      $("#wrapper").children("div").eq(index).show().siblings().hide();
  });
  

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