我多次使用相同的 CSS 代码,只是给它取了不同的名字。所以基本上我一遍又一遍地调用相同的 CSS,但命名不同。我觉得我应该循环遍历它。有什么想法吗?
#block1{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block1.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block2{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block2.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block3{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block3.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block4{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block4.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block5{display:block; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
#block5.a{display:none; background-color:#FFFFFF ; color:black; padding:1px; margin:5px;}
然后在 HTML 中我这样做:
<button onclick="document.getElementById('block1').setAttribute('class', '');">
<b><abbr title="Reports showing all cases with various display options."><span style='color:black;'>Current Status Reports</b></span></button><br>
<div id="block1" class="a">
<a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus_crprocess');">Current Status Report With Legal Process</a><br>
<a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus');">Current Status Report</a><br>
<a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_response');">Current Status Report With Last Response</a><br>
<a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_receipt');">Current Status Report With Last Receipt</a><br>
<a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/dm_currentstatus_last_response_plantiff');">Current Status Report With Last Response and Plaintiff</a><br>
<a href="javascript:GenerateReport( 'https://www.skerrys.com/oecgi.exe/dm_currentstatus_trxdte');">Current Status Report by Date Transferred</a><br>
<button onclick="document.getElementById('block1').setAttribute('class', 'a');"><b>Hide -</b></button>
</div>
<button onclick="document.getElementById('block2').setAttribute('class', '');"> <b><abbr title="Reports showing current new business & demand letters sent to debtors.">New Business & Letters Before Action</b></button><br>
<div id="block2" class="a">
<a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/DM_NewBusiness');">New Business This Period</a><br>
<a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/DM_LBASent');">Letter Before Action Sent</a><br>
<a href="javascript:GenerateReport( 'https://www.kerrys.com/oecgi.exe/DM_CasesAwaitingInstructions_Issue');">Cases Awaiting Instructions to Issue</a><br>
<button onclick="document.getElementById('block2').setAttribute('class', 'a');"><b>Hide -</b></button>
</div>
最佳答案
在您的特定情况下,您可以使用 css 属性选择器 ^=
,这是一种开始于选择器:
[id^="block"] {
/* your style */
}
[id^="block"].a {
/* your style */
}
关于html - 循环遍历 css 可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28434477/