案例一：日曆選中（li）
示例如圖：

預設選中第一個：週一，如圖：

點選週二，如圖：

JS程式碼：

<script type="text/javascript">
    var oLis=document.getElementsByTagName("li");
    var i,j;
    var length=oLis.length;
    for(i=0;i<length;i++){
        oLis[i].onclick=function(){
            for(j=0;j<length;j++){
                oLis[j].className=""
 
;
            }
            this.className+="clickstyle";
        }
    }
</script>

html程式碼：

                <ul class="cal_ul">
                    <a href="#">
                        <li class="active">週一<p>5</p>
                        </li>
                    </a
 
>
                    <a href="registration_doctor1.html">
                        <li>週二<p>6</p>
                        </li>
                    </a>
                    <a href="#">
                        <li>週三<p>7</p>
                        </li
 
>
                    </a>
                    <a href="#">
                        <li>週四<p>8</p>
                        </li>
                    </a>
                    <a href="#">
                        <li>週五<p>9</p>
                        </li>
                    </a>
                    <a href="#">
                        <li>週六<p>10</p>
                        </li>
                    </a>
                    <a href="#">
                        <li>週日<p>11</p>
                        </li>
                    </a>
                    <a href="#">
                        <li>週一<p>12</p>
                        </li>
                    </a>
                </ul>

CSS程式碼：

<style>
    .cal_ul >li >a:hover{   
    background: #ffffff;
    }
    .clickstyle {
    background: #4E7CA0;
    color: #ffffff;
}

</style>

案例二：繳費選中

預設選中第一個：掛號費，如圖：

點選第二個，診療費，如圖：

JS程式碼：

<script type="text/javascript">
    var oLis=document.getElementsByTagName("td");
    var i,j;
    var length=oLis.length;
    for(i=0;i<length;i++){
        oLis[i].onclick=function(){
            for(j=0;j<length;j++){
                oLis[j].className="";
            }
            this.className+="clickstyle";
        }
    }
</script>

html程式碼：

 <table class="table_pay">
                    <tr><td class="pay_td"><a href="#">掛號費：0.00</a></td></tr>
                    <tr><td><a href="#">診療費：0.00</a></td></tr>
                    <tr><td><a href="#">醫藥費：0.00</a></td></tr>
                    <tr><td><a href="#">社保抵扣：0.00</a></td></tr>
                    <tr><td><a href="#">自 費：0.00</a></td></tr>                               
</table>
<a class="table_pay_a" href="pay_card.html">繳費</a> 

CSS程式碼：

<style>
    .login-page .form .pay .table_pay .pay_td >a{/*提高優先順序！*/
        color:#ff6a00;
    }
    .login-page .form .pay .table_pay .clickstyle >a{
        color:#ff6a00;
    }
    .clickstyle {
    text-align:center;
    height:60px;
    padding:0;
    color:#ff6a00;
    border:3px solid #ff6a00;
    border-radius:10px;
}

</style>