Question

我有一组选项卡，使用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>

我希望所有这些都能在页面打印时显示。

我试图揭露它们：

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

然而，它仍然只显示第一个标签。我做错了什么？

Answer 1

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

尝试调整你的JS以使用类，因此在样式表中保持样式或（并且不建议真正使用）：

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

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

1 个答案: