如何通过单击任何选项卡中的 Print 按钮来迭代所有 Bootstrap 选项卡并打印内容(不仅是事件标记的内容，还包括非事件标记的内容)。
每个选项卡都动态插入内容。尝试了我在相关 SO 解决方案中找到的一些建议的 css 更改。这些对我不起作用。
onclick 我的打印按钮的函数在这里
function printMe() {
var theWork = window.open('', 'PrintWindow');
var tabs_html = "<html><head><title>Print</title>";
tabs_html += "<style>body { padding: 15px; }</style></head>";
$(".tabs").each(function() {
$(this).find(".nav-tabs li").each(function(index, element) {
tabs_html += "<h2>" + $(this).text() + "</h2><br/>";
tabs_html += $(".tab-content .tab-pane").eq(index).html() + "<br/><br/>";
});
$(this).after(tabs_html + "</body></html>");
});
theWork.document.open();
theWork.document.write(tabs_html);
theWork.document.close();
theWork.print();
}
<强> Fiddle
最佳答案
您的代码有两个问题。
- 您将在
each循环内附加结束body和html标记。 - 您正在选择
tabs类的元素。但提供的 DOM/Fiddle 中似乎没有这样的元素。
我已通过 1. 将结束 body 和 html 标记移出循环，以及 2. 替换 .class< 解决了上述两个问题 选择器和 #id 选择器，瞧!它有效。
关于javascript - 如何遍历所有 Bootstrap 选项卡并在单击按钮时打印内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38303871/