JQuery toggle/html: 更改 div 中的内容

Question

我目前正在设计一个博客布局，其中包含 div 主栏和 link 侧栏。我希望 each link 更改主要 div. 的内容我尝试使用切换和 html.

这里是正文class和每个link的内容：

<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 的片段（不起作用）：

$(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 上，我有 显示：none。

Answer 1

我认为这是显示和隐藏 div 的简单方法，方法是使用 HTML5 的数据属性（此处它们的 id 是在 data-target 属性中使用）。请参阅下面的代码片段...

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

#main > 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>

JQuery toggle/html: 更改 div 中的内容

JQuery toggle/html: changing the content in div

javascript

jquery

innerhtml

toggle