css + javscript 滑門,相容ff

來源:互聯網
上載者:User

<title>css + javscript 滑門,相容ff</title>
<style type="text/css">
<!--
li{ margin:0px; list-style-type:none; height:24px;}
#header { background-color:#F7FBFF; height:200px; width:502px; border:1px solid #7B9EBD;}
#menu { margin:0px; padding:0px; list-style-type: none; cursor:pointer; }
#menu li { width:100px; text-align:center; float:left; padding-top:0.2em 0px 0.2em 0px;}
.overit { background-color:#F7FBFF; border-bottom:0px;}
.outit { background-color:#DCE6F0;}
.block { display: block;}
.unblock { display: none;}
-->
</style>
<script language="javascript">
function Sliding(id,e){
 e=e||window.event.srcElement;
 var m=document.getElementById(e.parentNode.id).getElementsByTagName("li");
 var t=document.getElementById(e.parentNode.getAttribute("content")).getElementsByTagName("li");
 for(var n=0; n<m.length; n++){
  m[n].className="outit";
  t[n].className="unblock";
 }
  e.className = "overit";
  t[id].className="block";
}
</script>
<div id="header">
<ul id="menu" content="main">
 <li onMouseOver="Sliding(0)" class="overit">百匯電腦學校</li>
 <li onMouseOver="Sliding(1)" class="outit">windows基礎 </li>
 <li onMouseOver="Sliding(2)" class="outit">平面設計</li>
 <li onMouseOver="Sliding(3)" class="outit">網頁設計</li>
 <li onMouseOver="Sliding(4)" class="outit">關於我們</li>
</ul>
<!--內容顯示地區-->
<ul id="main">
 <li class="block">一、百匯電腦學校</li>
 <li class="unblock">二、windows基礎</li>
 <li class="unblock">三、平面設計</li>
 <li class="unblock">四、網頁設計</li>
 <li class="unblock">五、xiaozhao,fengtingyun#126.com,48347674</li>
</ul>
<!--內容顯示地區-->
</div>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.