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

Question

我想要做的是获取每个bootstrap选项卡的内容，并在不同的div中打印它们。基本上，我想为每个data-el.tab=‘tab’触发切换(‘show’)函数，抓取显示的内容，并在同一页上的不同div中打印它们。

​

$(function() {
$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
});

.new
{
  width: 30%;
  margin: 1%;
  border: 1px solid black;
  display: inline-block;
  min-height: 100px; 
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body> 
  <ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
  
  <div class="tab-content">
  <div class="tab-pane active" id="home">This is Home</div>
  <div class="tab-pane" id="profile">This is Profile</div>
  <div class="tab-pane" id="messages">This is Messages</div>
  <div class="tab-pane" id="settings">This is Settings</div>
  </div>
  
  <div id="newHome" class='new'>
    Want to print home content here
  </div>
  <div id="newProfile" class='new'>
    Want to print profile content here
  </div>
    <div id="newMessages" class='new'>
    Want to print messages content here
  </div>
    <div id="Settings" class='new'>
    Want to print settings content here
  </div>
</body>
</html>

​

示例：http://jsbin.com/zixihexepu/edit?html,css,js,output

Answer 1

因为已经定义了jQuery，所以从HTML头中删除<script src="https://code.jquery.com/jquery-3.1.0.js"></script>，多次定义会导致问题。

然后试试这个：

$(function() {
  //This event fires on tab show after a tab has been shown.
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    //get the content href
    var contentId = $(e.target).attr('href');
    //from content href prepare new div id and show content html there
    $("#new" + contentId.substring(1).capitalizeFirstLetter()).html($("" + contentId).html());
  })
});

String.prototype.capitalizeFirstLetter = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}

检查此fiddle

bootstrap选项卡事件Reference