Html 打印页面时显示所有选项卡

我有一组选项卡，在选中时使用javascript显示它们。您可以看到下面的html

    <div id="tabs">
    <ul id="tableTabs">
        <li><a href="#tabs-1">Employee</a></li>
        <li><a href="#tabs-2">Employee + Spouse</a></li>
        <li><a href="#tabs-3">Employee + Children</a></li>
        <li><a href="#tabs-4">Family</a></li>
    </ul>

    <div id="tabs-1">
        <h2>Employee</h2>
        <span id="ContentPlaceHolderBody_lblEmployee"><table border='0' class='formatRight'><tr><td>Hourly Rate: </td><td></td><td> $15.00</td></tr> <tr><td>Your Annualized Pay (Includes Vacation Pay): </td><td></td><td>$31,200.00</td></tr> <tr><td>Your Bonus Pay: </td><td></td><td>$0.00</td></tr> <tr><td>Overtime: </td><td></td><td> $0.00</td></tr> <tr><td>Your Vacation Pay (Assumes five years with Zachry): </td><td>$1,200.00 </td></tr><tr><td>FICA -- Social Security & Medicare:</td><td> $2,386.80 </td></tr> <tr><td>Group Term Life Insurance: </td><td>$432.00 </td></tr><tr><td>401(k) Company Match: </td><td> $780.00 </td></tr><tr><td>Retirement-Benefit Contribution: </td><td>$624.00 </td></tr> <tr><td>Long Term Disability: </td><td>$88.61 </td></tr> <tr><td>Company Health Care Contribution: </td><td>$2,420.00 </td></tr><tbody><tr><td>Total Value of Benefits: </td><td>$6,642.80</td></tr><tr><td>Total Pay (Includes Overtime Pay): </td><td></td><td>$31,200.00</td></tr> <tr><td>Total Value of Your Annual Compensation & Benefits: </td><td></td><td></td><td> $37,842.80 </td></tr> </table></span>
    </div>

    <div id="tabs-2">
        <h2>Employee + Spouse</h2>
        <span id="ContentPlaceHolderBody_lblEmployeeSpouse"><table border='0' class='formatRight'><tr><td>Hourly Rate: </td><td></td><td> $15.00</td></tr> <tr><td>Your Annualized Pay (Includes Vacation Pay): </td><td></td><td>$31,200.00</td></tr> <tr><td>Your Bonus Pay: </td><td></td><td>$0.00</td></tr> <tr><td>Overtime: </td><td></td><td> $0.00</td></tr> <tr><td>Your Vacation Pay (Assumes five years with Zachry): </td><td>$1,200.00 </td></tr><tr><td>FICA -- Social Security & Medicare:</td><td> $2,386.80 </td></tr> <tr><td>Group Term Life Insurance: </td><td>$432.00 </td></tr><tr><td>401(k) Company Match: </td><td> $780.00 </td></tr><tr><td>Retirement-Benefit Contribution: </td><td>$624.00 </td></tr> <tr><td>Long Term Disability: </td><td>$88.61 </td></tr> <tr><td>Company Health Care Contribution: </td><td>$4,951.00 </td></tr><tbody><tr><td>Total Value of Benefits: </td><td>$9,173.80</td></tr><tr><td>Total Pay (Includes Overtime Pay): </td><td></td><td>$31,200.00</td></tr> <tr><td>Total Value of Your Annual Compensation & Benefits: </td><td></td><td></td><td> $40,373.80 </td></tr> </table></span>
    </div>

    <div id="tabs-3">
        <h2>Employee + Children</h2>
        <span id="ContentPlaceHolderBody_lblEmployeeChildren"><table border='0' class='formatRight'><tr><td>Hourly Rate: </td><td></td><td> $15.00</td></tr> <tr><td>Your Annualized Pay (Includes Vacation Pay): </td><td></td><td>$31,200.00</td></tr> <tr><td>Your Bonus Pay: </td><td></td><td>$0.00</td></tr> <tr><td>Overtime: </td><td></td><td> $0.00</td></tr> <tr><td>Your Vacation Pay (Assumes five years with Zachry): </td><td>$1,200.00 </td></tr><tr><td>FICA -- Social Security & Medicare:</td><td> $2,386.80 </td></tr> <tr><td>Group Term Life Insurance: </td><td>$432.00 </td></tr><tr><td>401(k) Company Match: </td><td> $780.00 </td></tr><tr><td>Retirement-Benefit Contribution: </td><td>$624.00 </td></tr> <tr><td>Long Term Disability: </td><td>$88.61 </td></tr> <tr><td>Company Health Care Contribution: </td><td>$4,951.00 </td></tr><tbody><tr><td>Total Value of Benefits: </td><td>$9,173.80</td></tr><tr><td>Total Pay (Includes Overtime Pay): </td><td></td><td>$31,200.00</td></tr> <tr><td>Total Value of Your Annual Compensation & Benefits: </td><td></td><td></td><td> $40,373.80 </td></tr> </table></span>
    </div>

    <div id="tabs-4">
        <h2>Family</h2>
        <span id="ContentPlaceHolderBody_lblFamily"><table border='0' class='formatRight'><tr><td>Hourly Rate: </td><td></td><td> $15.00</td></tr> <tr><td>Your Annualized Pay (Includes Vacation Pay): </td><td></td><td>$31,200.00</td></tr> <tr><td>Your Bonus Pay: </td><td></td><td>$0.00</td></tr> <tr><td>Overtime: </td><td></td><td> $0.00</td></tr> <tr><td>Your Vacation Pay (Assumes five years with Zachry): </td><td>$1,200.00 </td></tr><tr><td>FICA -- Social Security & Medicare:</td><td> $2,386.80 </td></tr> <tr><td>Group Term Life Insurance: </td><td>$432.00 </td></tr><tr><td>401(k) Company Match: </td><td> $780.00 </td></tr><tr><td>Retirement-Benefit Contribution: </td><td>$624.00 </td></tr> <tr><td>Long Term Disability: </td><td>$88.61 </td></tr> <tr><td>Company Health Care Contribution: </td><td>$6,683.00 </td></tr><tbody><tr><td>Total Value of Benefits: </td><td>$10,905.80</td></tr><tr><td>Total Pay (Includes Overtime Pay): </td><td></td><td>$31,200.00</td></tr> <tr><td>Total Value of Your Annual Compensation & Benefits: </td><td></td><td></td><td> $42,105.80 </td></tr> </table></span>
    </div>
</div>

---

然而，它仍然只是显示第一个选项卡。我做错了什么？

如果您的JS将样式内联设置为“显示/隐藏”，这将优先于样式表

尝试调整JS以使用类，因此在样式表中保留样式，或者（不建议）使用：

---

为了补充这一点，我实际上会将选项卡设置为默认显示块，然后用js隐藏它们。这对非JS用户更好，这意味着编写更少的css。

@media print {
    #tabs, #tabs-1, #tabs-2, #tabs-3, #tabs-4 {
        display: block;
    }
}

@media print {
    #tabs, #tabs-1, #tabs-2, #tabs-3, #tabs-4 {
        display: block!important;
    }
}