JS melaksanakan kemahiran kod_javascript kesan pintu gelangsar biru muda yang cantik-tutorial js-php.cn

JS melaksanakan kemahiran kod_javascript kesan pintu gelangsar biru muda yang cantik

WBOY

Lepaskan： 2016-05-16 15:38:18

asal

1311 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara untuk mencapai kesan pintu gelangsar biru muda yang cantik dengan JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kod pintu gelangsar biru muda yang cantik ini terasa sangat bagus.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-blue-hdm-menu-demo-codes/

Kod khusus adalah seperti berikut:

<!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.jb51.net"+index;
   document.getElementById ("div"+index).style.display ="block";
  }
 </script>
</head>
<body>
 <form id="form1" runat="server">
  <div>
   <div id="divMainTab">
    <ul style="list-style: none; margin: 0px; padding: 0px; border-collapse: collapse;">
     <li id="li_1" class="selected" onmouseover="changeTab('1')"><a href="#">最新更新</a> </li>
     <li id="li_2" class="normal" onmouseover="changeTab('2')"><a href="#">阅读排行</a> </li>
     <li id="li_3" class="normal" onmouseover="changeTab('3')"><a href="#">本月排行</a> </li>
     <li id="li_4" class="normal" onmouseover="changeTab('4')"><a href="#">本日排行</a> </li>
     <li id="li_5" class="normal" onmouseover="changeTab('5')"><a href="#">脚本之家</a> </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 id="div4" style ="display :none" class ="divContent">
    4号
   </div>
    <div id="div5" style ="display :none" class ="divContent"> 
    5号
   </div> 
  </div>
 </form>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.