jquery - CSS で、選択されている場合にタブの色を切り替える方法 (javascript を使用せずに)

Question

選択されたときにタブヘッダーの色を切り替える必要があります。
JavaScriptなしで行うのは難しいことは知っていますが、JavaScriptなしで必要です。
SOで検索しましたが、彼らの質問からそれを吸収できません。

これは私のCSSコードです:

<style type="text/css">
#tabs-1,#tabs-2,#tabs-3,#tabs-4,#tabs-5,#tabs-6{
    min-height: 350px;
}

table{
border-collapse: separate;
}

table td {
    width: 195px;
}

table tr .td-label {
    text-align: left;
    height:25px; 
    width: 280px;
}

table h3 {
font-weight:bold;
color:#330066;
}

#tabs li{
background-color:orange;
}
#tabs li:hover{
background-color:white;
}

#tabs li[tabindex="0"] a {
    background-color:white;
}

</style>

これは私のHTMLコードです:

<div class="demo">
        <h2>Tab Details</h2>

        <div style="height: 20px;">
            <label style="font-size: 12px">${msg}</label>
        </div>
        <div id="tabs" style="width: 790px;">
            <ul>
                <li><a href="#tabs-1"><spring:message code="Tab1" /></a></li>
                <li><a href="#tabs-2"><spring:message code="Tab2" /></a></li>
                <li><a href="#tabs-3"><spring:message code="Tab3" /></a></li>
                <li><a href="#tabs-4"><spring:message code="Tab4" /></a></li>
                <li><a href="#tabs-5"><spring:message code="Tab5" /></a></li>
                <li><a href="#tabs-6"><spring:message code="Tab6" /></a></li>
            </ul>

            </div>
</div>

JavaScript コーディングを使用せずにタブの色を切り替えます。