CSS+JS制作导航栏点击选中效果

案例一:日历选中(li)
示例如图:

默认选中第一个:周一,如图:
CSS+JS制作导航栏点击选中效果_第1张图片

点击周二,如图:
CSS+JS制作导航栏点击选中效果_第2张图片

JS代码:

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

html代码:

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

CSS代码:

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

style>

案例二:缴费选中

默认选中第一个:挂号费,如图:
CSS+JS制作导航栏点击选中效果_第3张图片

点击第二个,诊疗费,如图:
CSS+JS制作导航栏点击选中效果_第4张图片

JS代码:

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

html代码:

 <table class="table_pay">
                    <tr><td class="pay_td"><a href="#">挂号费:0.00a>td>tr>
                    <tr><td><a href="#">诊疗费:0.00a>td>tr>
                    <tr><td><a href="#">医药费:0.00a>td>tr>
                    <tr><td><a href="#">社保抵扣:0.00a>td>tr>
                    <tr><td><a href="#">自 费:0.00a>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>

你可能感兴趣的:(日常记录)