Показывать все вкладки при печати страницы

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; 
    } 
} 

Однако это еще только показывает вкладку 1-й. Что я делаю не так?

Answer 1

Если ваш JS устанавливает стиль inline для отображения/скрытия, это будет иметь приоритет над таблицей стилей.

Постарайся либо адаптировать свои JS использовать класс, поэтому сохраняя стиль в таблице стилей или (и не рекомендуется на самом деле) использовать:

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