获取每个bootstrap选项卡的内容并在单独的div中打印它们？

<div class="container">
  <ul class="nav nav-tabs" id="myTabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Content for Tab 1</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Content for Tab 2</p>
    </div>
    <div class="tab-pane" id="tab3">
      <p>Content for Tab 3</p>
    </div>
  </div>
</div>

$(document).ready(function() {
  // 监听选项卡的切换事件
  $('#myTabs a').on('shown.bs.tab', function(event) {
    var tabContent = $(event.target).attr('href'); // 获取当前选项卡的内容ID
    var content = $(tabContent).html(); // 获取选项卡内容的HTML

    // 创建一个新的div来显示选项卡内容
    var newDiv = $('<div>').html(content);
    $('body').append(newDiv); // 将新的div添加到页面中
  });
});