我有一个包含多个选项卡的调查。当用户完成调查后，我希望他们能够打印调查或将其保存为 PDF。目前我只能打印/保存打开的选项卡。
是否有一个在使用 JavaScript 打印类时删除“选项卡内容”以便显示所有选项卡的代码: http://codepen.io/pbuckleycork/pen/zvpMdr
<div class="bs-example">
<ul class="nav nav-tabs tabs-custom">
<li class="">
<a href="#tab1" data-toggle="tab">User Info</a>
</li>
<li class="active">
<a href="#tab2" data-toggle="tab">Other Info</a>
</li>
<li class="">
<a href="#tab3" data-toggle="tab">Email History</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<div class="row equal-height-columns">
<!-- first column for create survey -->
<div class="col col-md-6 col-md-with-separator">
<div class="form-horizontal">
<div class="form-group form-group-reduce-padding">
<label for="labelName" class="col-sm-6 control-label-padding"> Name:</label>
<div class="col-sm-6">
<p id="labelName" class="form-control-static"> John Smith </p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelAddress" class="col-sm-6 control-label-padding"> Address:</label>
<div class="col-sm-6">
<p id="labelAddress" class="form-control-static"> No1, Some Street, Some Town, Dublin, D1</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelEmail" class="col-sm-6 control-label-padding">Email:</label>
<div class="col-sm-6">
<p id="labelEmail" class="form-control-static"> <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10757d71797c50757d71797c3e737f7d" rel="noreferrer noopener nofollow">[email protected]</a> </p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelDOB" class="col-sm-6 control-label-padding">DOB:</label>
<div class="col-sm-6">
<p id="labelDOB" class="form-control-static">15/02/2015</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelStatus" class="col-sm-6 control-label-padding">Status:</label>
<div class="col-sm-6">
<p id="labelStatus" class="form-control-static"> Active</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelAccBlocked" class="col-sm-6 control-label-padding">Account Blocked:</label>
<div class="col-sm-6">
<p id="labelAccBlocked" class="form-control-static"> Yes</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelBlocked" class="col-sm-6 control-label-padding">Blocked Until Date:</label>
<div class="col-sm-6">
<p id="labelBlocked" class="form-control-static"> 01/01/2015</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelBlockedReason" class="col-sm-6 control-label-padding">Blocked Reason:</label>
<div class="col-sm-6">
<p id="labelBlockedReason" class="form-control-static"> Insurance renewal has passed</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="tab2">
<br>
<p class="tab-header">Courses</p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th>Stream</th>
<th>Institute</th>
<th>CourseID</th>
<th>Tutor</th>
<th>Date Course Completed</th>
<th>Course Location</th>
</tr>
<tr>
<td>NDBER</td>
<td>Carlow IT</td>
<td>ABC123</td>
<td>John Tutor</td>
<td>17/May/2014</td>
<td>Carlow</td>
</tr>
<tr>
<td>BER</td>
<td>Carlow IT</td>
<td>ABC321</td>
<td>Paul Tutor</td>
<td>02/Feb/2014</td>
<td>Carlow</td>
</tr>
</tbody>
</table>
</div>
<p class="tab-header">Exam History</p>
</div>
<div class="tab-pane" id="tab3">
<br>
<p class="tab-header">Email History</p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th>From</th>
<th>To</th>
<th>CC</th>
<th>Date</th>
<th>Subject</th>
<th>Message</th>
<th>Attachment</th>
</tr>
<tr>
<td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6b4b3a4b6979785858585d89f93" rel="noreferrer noopener nofollow">[email protected]</a></td>
<td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e5f5e5e5e5c5b2e1a0b1d1a40000b1a" rel="noreferrer noopener nofollow">[email protected]</a></td>
<td> </td>
<td>05/May/2014</td>
<td>Welcome dsad</td>
<td><a href="#">Dear John Welcome</a>
</td>
<td><a href="#">View</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
最佳答案
您可以使用下面的代码显示所有带标题的选项卡:
$('.nav-tabs').hide();
$headings = $('.nav-tabs li a');
$('.tab-content .tab-pane').each(function(i, el){
$(this)
.addClass('active')
.prepend('<h3>' + $($headings.get(i)).text() + '</h3>')
});
参见updated example用于演示。
作为替代解决方案，您可以添加以下 CSS 规则，以便在打印时显示所有选项卡 Pane :
@media print {
.tab-content > .tab-pane {
display: block;
}
}
关于javascript - 打印网页上的所有选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33261642/