JQuery toggle/html：更改 div 中的内容答案

【问题标题】：JQuery toggle/html: changing the content in divJQuery toggle/html：更改 div 中的内容
【发布时间】：2018-07-06 11:17:21
【问题描述】：

我目前正在开发一个带有主 div 和带有链接的侧边栏的博客布局。我希望每个链接都改变主 div 的内容。 我尝试使用切换和 html。

这里是主类和每个链接的内容：

<div id="main"></div>  
  <div id="works">
      These are my works.
  </div>

  <div id="info">
      About me.
  </div>

  <div id="tags">
      Tag list.
  </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>

所以当我点击“works”按钮时，我希望该 div 的内容进入主 div。

这是 JQuery 的 sn-p（不起作用）：

$(function(){  
 $('#butt1').click(function() {
    $('#main').html($('#works'));
    $('#works').toggle();
    $('#info').hide();
    $('#tags').hide();
});

$('#butt2').click(function() {
    $('#main').html($('#info'));    
    $('#info').toggle();
    $('#works').hide();
    $('#tags').hide();
});

$('#butt3').click(function() {
    $('.mainp').html($('#tags'));
    $('#tags').toggle();
    $('#info').hide();
    $('#works').hide();
});

});

注意：在我的 CSS 上，我也有 display: none。

【问题讨论】：

您可以单独显示和隐藏每个 div，而不是将主 html 分配给每个 div 的内容（只需删除带有 .html() 的行）。此外，您可能希望使用.show() 而不是.toggle()，因为切换不一定会以正确的方式切换它，特别是如果其他功能修改了 div 的可见性。 jsbin.com/viyumejima/edit?html,css,js,output
为什么不作为答案发布？ @布莱恩
@Brian 感谢您的回复。但是我如何在主 div 中指定我想要它？（如果我删除 .html() 它会将整个页面的内容放在最顶部）

标签： javascript jquery toggle innerhtml

【解决方案1】：

我认为这是显示和隐藏divs 的简单方法，方法是使用HTML5 的数据属性分配与按钮的关系（这里它们的ids 用于data-target 属性）。看下面的sn-p...

$(function(){
  $('[data-target]').on('click', function(){
    var target = $(this).data('target');
    $(target).siblings().hide().end().show();
  });
});

#main &gt; div:not(:first-child) {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">     
   <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 id="main">
  <div id="works">
      These are my works.
  </div>

  <div id="info">
      About me.
  </div>

  <div id="tags">
      Tag list.
  </div>
</div>

【讨论】：