漂亮淡藍色滑動門代碼

2024-09-05 12:20:33

字體：大中小

供稿：網(wǎng)友

漂亮淡藍色滑動門代碼，感覺很不錯哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>漂亮淡藍色滑動門代碼</title>    <style type="text/css">        body        {            font-size:12px;        }        .normal        {              list-style: none; float: left;              padding: 5px 2px 2px 2px;              width: 90px; text-align :center ;               vertical-align :middle ;               cursor :pointer ;               border-bottom :solid 1px #9cd9f5;               border-right :solid 1px #9cd9f5;              background-color: #dee7f5;               border-collapse :separate ;        }        .selected        {             list-style: none;              float: left;              padding: 5px 2px 2px 2px;             width: 90px;              text-align :center ;              vertical-align :middle ;              cursor :pointer ;             border-bottom :solid 0px #9cd9f5;              border-right :solid 1px #9cd9f5;             background-color:#f8f8f8 ;        }                #divMainTab        {             border-left :solid 1px #9cd9f5;              border-top :solid 1px #9cd9f5;             float:left;             margin: 0px; padding: 0px        }                .divContent        {                width: 474px;                height: 400px;                 clear: both;                 border-bottom: solid 1px #9cd9f5;                border-left: solid 1px #9cd9f5;                 border-right: solid 1px #9cd9f5;        }                a{            text-decoration: none;            color: #00ccff;        }        a:hover        {            text-decoration: underline;            color: #cc0000;        }    </style>    <script language="javascript" type="text/javascript">        function changeTab(index)        {            for (var i=1;i<=5;i++)            {                document.getElementById ("li_"+i).className ="normal";                document.getElementById ("li_"+index).className ="selected";               document.getElementById ("div"+i).style.display  ="none";            }            document.getElementById ("div1").innerText= "www.codefans.net"+index;            document.getElementById ("div"+index).style.display  ="block";       }    </script></head><body>    <form id="form1" runat="server">        <div>            <div   class="iwvjtn8m0"   id="divMainTab">                <ul style="list-style: none; margin: 0px; padding: 0px; border-collapse: collapse;">                                       <li id="li_1" class="selected" onmouseover="changeTab('1')">最新更新 </li>                    <li id="li_2" class="normal" onmouseover="changeTab('2')">閱讀排行 </li>                    <li id="li_3" class="normal" onmouseover="changeTab('3')">本月排行 </li>                    <li id="li_4" class="normal" onmouseover="changeTab('4')">本日排行 </li>                    <li id="li_5" class="normal" onmouseover="changeTab('5')">源碼愛好者 </li>                 </ul>                        </div>            <div   id="div1" style ="display :block" class ="divContent">                1號            </div>             <div  id="div2" style ="display :none" class ="divContent">                2號            </div>             <div  id="div3" style ="display :none" class ="divContent">                3號            </div>             <div   class="iwvjtn8m0"   id="div4" style ="display :none" class ="divContent">                4號            </div>             <div   id="div5" style ="display :none" class ="divContent">                5號            </div>         </div>    </form></body></html>

上一篇：經(jīng)過改造的左側(cè)豎向滑動菜單

下一篇：自寫的一Javascript右鍵菜單類