我有一个包含多个标签的调查。当用户完成调查后，我希望他们能够打印调查或将其另存为PDF。目前我只能打印/保存打开的标签。
是否要删除“标签内容”＆＃39;使用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"> email@email.com </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>BER@aassss.ie</td>
<td>100025@test.net</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>
答案 0 :(得分：2)
您可以使用以下代码显示所有带标题的标签：
$('.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规则，以便在打印时显示所有选项卡窗格：
@media print {
.tab-content > .tab-pane {
display: block;
}
}
答案 1 :(得分：1)
如果我理解正确你想在打印时显示一些隐藏的东西？我会使用媒体打印件和一个特殊的样式表来设计打印的东西。
<link rel="stylesheet" media="print" href="print.css">
答案 2 :(得分：0)
这似乎有用（纯JavaScript）：
document.querySelector('.tab-content').classList.remove('tab-content');
http://codepen.io/anon/pen/BoJMVd
您可以添加一个按钮来执行该操作并将其命名为Print view。
function printView() {
document.querySelector('.tab-content').classList.remove('tab-content');
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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>
<li class="">
<a onclick="printView();">Print view</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">email@email.com</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>BER@aassss.ie</td>
<td>100025@test.net</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>