天天看點
傳回

一個TAB頁的簡單JS實作

請看下面的代碼吧，比較簡單。

  1. <html>  
  2. <head>  
  3.     <title>一個TAB頁的簡單JS實作</title>  
  4.     <style type="text/css">  
  5.     #div0{  
  6.         width:300px;  
  7.         margin:0 auto;  
  8.     }  
  9.     #div1{  
  10.         border:1px solid blue;  
  11.         border-bottom:0px solid blue;  
  12.         float:left;  
  13.     }  
  14.     #div2{  
  15.         border-right:1px solid blue;  
  16.         border-top:1px solid blue;  
  17.         float:left;  
  18.     }  
  19.     #div3{  
  20.         border:1px solid blue;  
  21.         clear:left;  
  22.     }  
  23.     #div4{  
  24.         border:1px solid blue;  
  25.         clear:left;  
  26.     }  
  27. </style>  
  28. <script language="javascript">  
  29. window.onload=function(){  
  30. document.getElementById("div1").style.backgroundColor="yellow";  
  31. document.getElementById("div4").style.display="none";  
  32. }  
  33. function foo(){  
  34. document.getElementById("div1").style.backgroundColor="yellow";  
  35. document.getElementById("div2").style.backgroundColor="";  
  36. document.getElementById("div3").style.display="none";  
  37. document.getElementById("div4").style.display="block";  
  38. }  
  39. function bar(){  
  40. document.getElementById("div1").style.backgroundColor="";  
  41. document.getElementById("div2").style.backgroundColor="yellow";  
  42. document.getElementById("div3").style.display="block";  
  43. document.getElementById("div4").style.display="none";  
  44. }  
  45. </script>  
  46. </head>  
  47. <body>  
  48.     <div id="div0">  
  49.         <div id="div1" onmouseover="foo()">Hello</div>  
  50.         <div id="div2" onmouseover="bar()">world</div>  
  51.         <div id="div3">Jason周五能中500萬</div>  
  52.         <div id="div4">Jason有個好老婆</div>  
  53.     </div>  
  54. </body>  
  55. </html>  
html/css/js javascript css html
上一篇: 關于IE6中無法使用margin:0 auto居中的問題終極解決方案
下一篇: 實操解決position:absolute之後margin:auto失效的問題實操解決絕對定位之後margin：auto失效的問題前言一、問題重制二、解決辦法

繼續閱讀