获取每个引导程序选项卡的内容并将它们打印在单独的div中?

时间:2017-02-27 18:04:09

标签: javascript jquery twitter-bootstrap

我想要做的是获取每个引导程序选项卡的内容并将它们打印在不同的div中。基本上,我想为每个[data-toggle ='tab']触发el.tab('show')函数,抓取显示的内容,并在同一页面上的不同div中打印它们。

var albumImages = db.albums.aggregate([{$unwind:"$images"},{$group:_id:null,image:{$addToSet:"$images"}}}]);
var imageList = db.images.aggregate([{$group: {_id:null, image:{$addToSet:"$_id"}} }]);
for(var i = 0; i < imageList.image.length; i++) {
    if(albumImages.image.indexOf(imageList.image[i]) < 0) {
        db.images.removeOne({_id:imageList.image[i]});
    }
}
$(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; 
}

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

1 个答案:

答案 0 :(得分:0)

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

然后试试这个:

$(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