使用jQuery toggle/html切换博客主div内容失效问题求助

嘿，我帮你排查了下代码里的问题，主要有几个关键点导致切换功能失效，咱们一步步来修正：

问题根源 #

1. 选择器写错了：第三个按钮的点击事件里用了$('.mainp')，但你的主内容容器是id="main"，这明显对不上，肯定没法替换内容。
2. 内容替换逻辑混乱：你用$('#main').html($('#works'))的时候，其实是把#works这个元素直接从原位置移动到#main里面，再加上toggle()操作，会让元素的显示状态彻底乱掉。
3. 冗余的显示控制：既然要把内容放到#main里，原有的#works/#info/#tags只需要保持隐藏就好，用toggle()完全没必要，反而会添乱。

修正后的基础版代码 #

先保持你的HTML结构（默认隐藏内容） #

<div id="main"></div>

<div id="mainlink">
  <button class="linkd" id="butt1">Works</button>
  <button class="linkd" id="butt2">Info</button>
  <button class="linkd" id="butt3">Tags</button>
</div>

<!-- 这些内容默认通过CSS设置display: none -->
<div id="works">These are my works.</div>
<div id="info">About me.</div>
<div id="tags">Tag list.</div>

修正后的jQuery代码 #

$(function(){
  // 封装一个通用的隐藏函数，减少重复代码
  function hideAllContentBoxes() {
    $('#works, #info, #tags').hide();
  }

  $('#butt1').click(function() {
    hideAllContentBoxes();
    // 这里要传入元素的HTML内容，而不是直接传jQuery对象
    $('#main').html($('#works').html());
  });

  $('#butt2').click(function() {
    hideAllContentBoxes();
    $('#main').html($('#info').html());
  });

  $('#butt3').click(function() {
    hideAllContentBoxes();
    // 修正这里的选择器错误，从.mainp改成#main
    $('#main').html($('#tags').html());
  });
});

更优雅的进阶方案（适合后续扩展） #

如果以后要加更多按钮和内容，上面的写法会越来越繁琐。可以用数据属性来绑定按钮和对应的内容容器，一次搞定所有逻辑：

优化后的HTML #

<div id="main">
  <!-- 可以放默认欢迎内容 -->
  Welcome to my blog!
</div>

<div id="mainlink">
  <!-- 用data-target绑定对应的内容容器ID -->
  <button class="linkd" data-target="works">Works</button>
  <button class="linkd" data-target="info">Info</button>
  <button class="linkd" data-target="tags">Tags</button>
</div>

<!-- 给所有内容容器加统一的类，方便批量操作 -->
<div class="content-box" id="works" style="display: none;">These are my works.</div>
<div class="content-box" id="info" style="display: none;">About me.</div>
<div class="content-box" id="tags" style="display: none;">Tag list.</div>

优化后的jQuery代码 #

$(function(){
  // 给所有侧边栏按钮绑定同一个点击事件
  $('.linkd').click(function() {
    // 获取当前按钮对应的目标容器ID
    const targetBoxId = $(this).data('target');
    // 隐藏所有内容容器
    $('.content-box').hide();
    // 把目标容器的内容渲染到主区域
    $('#main').html($(`#${targetBoxId}`).html());
  });
});

这样以后新增按钮和内容，只需要给按钮加data-target="xxx"，再对应新增一个id="xxx"的内容容器就行，完全不用改JS代码，维护起来超方便～

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