简单的 HTML Tab 标签

最新推荐文章于 2024-07-12 11:17:24 发布

cigu3483

最新推荐文章于 2024-07-12 11:17:24 发布

阅读量140

点赞数

原文链接：https://my.oschina.net/u/919022/blog/144666

版权

1，HTML body 中的代码

<body>
     <div id="parta">
         <ul id="tab">
             <li id="li1" class="tabli"><a href="#">网址大全</a></li>
             <li id="li2" class="tabli"><a href="#">常用网址</a></li>
             <li id="li3" class="tabli"><a href="#">资讯类</a></li>
             <li id="li4" class="tabli"><a href="#">购物类</a></li>
             <li id="li5" class="tabli"><a href="#">娱乐生活</a></li>
             <li id="li6" class="tabli"><a href="#">我的网址</a></li>
             <li id="li7" class="tabli"><a href="#">访问记录</a></li>
         </ul>
         <ul id="node1" class="node">
             <li>网址大全</li>
         </ul>
         <ul id="node2" class="node">
             <li>常用网址</li>
         </ul>
         <ul id="node3" class="node">
             <li>资讯类</li>
         </ul>
         <ul id="node4" class="node">
             <li>购物类</li>
         </ul>
         <ul id="node5" class="node">
             <li>娱乐生活</li>
         </ul>
         <ul id="node6" class="node">
             <li>我的网址</li>
         </ul>
         <ul id="node7" class="node">
             <li>访问记录</li>
         </ul>
     </div>
 </body>

2，CSS 代码

body { width:960px; height:1000px;  z-index:0;
        margin:50px auto auto auto; position:relative;
         border:1px solid #FF0000;}
 *{margin:0; padding:0;}
 ul,li{ list-style:none;}
 #parta{ width:700px; height:300px;  position:relative;
         border:1px solid #9ccefd;
          background-color:#deeefd;
          margin:50px auto auto auto;}
 
 #tab{ width:694px; height:25px; position:relative; 
       border:1px solid transparent;
        background-color:transparent; }
 
 .tabli{ display:block; font-family:Arial; font-size:12px; 
          width:80px; height:23px;
          text-align:center; z-index:20;
          background-color:#eff7fe; position:absolute;
                border:1px solid #9ccefd; }
 .node{ display:none; width:694px; height:252px; position:absolute; z-index:30;
         left:3px;top:44px;background-color:#ffffff; border-top:1px solid #9ccefd; }
 #node1{display:block;}
 #li1{top:20px; line-height:24px;left:8px; }
      /*border-bottom:transparent; background-color:#ffffff;*/
 #li2{top:20px; line-height:24px;left:93px;}
 #li3{top:20px; line-height:24px;left:177px;}
 #li4{top:20px; line-height:24px;left:261px;}
 #li5{top:20px; line-height:24px;left:345px;}
 #li6{top:20px; line-height:24px;left:430px;}
 #li7{top:20px; line-height:24px;left:515px;}

3，js代码

 function movetab() {
     var GetID1 = document.getElementById("li1");
     GetID1.onmouseover = function () { gettab(1); };
     var GetID2 = document.getElementById("li2");
     GetID2.onmouseover = function () { gettab(2); };
     var GetID3 = document.getElementById("li3");
     GetID3.onmouseover = function () { gettab(3); };
     var GetID4 = document.getElementById("li4");
     GetID4.onmouseover = function () { gettab(4); };
     var GetID5 = document.getElementById("li5");
     GetID5.onmouseover = function () { gettab(5); };
     var GetID6 = document.getElementById("li6");
     GetID6.onmouseover = function () { gettab(6); };
     var GetID7 = document.getElementById("li7");
     GetID7.onmouseover = function () { gettab(7); };
 }
 
 function gettab(flag) {
     for (var i = 1; i <=7; i++) {
 
         var setcent = document.getElementById("node" + i);
         var setTitle = document.getElementById("li" + i);
 
         setTitle.style.zIndex = "20";
         setTitle.style.border = "1px solid #9ccefd";
         setTitle.style.backgroundColor = "#eff7fe";
         setcent.style.display = "none";
         if (i == flag) {
             
             setTitle.style.zIndex = "40";
             setTitle.style.borderBottom = "transparent";
             setTitle.style.backgroundColor = "#ffffff";
             setcent.style.display = "block";
         }
     }
 }
 
 function addLoadListener(fn) {
     if (typeof window.addEventListener != 'underfind') {
         window.addEventListener('load', fn, false);
     }
     else if (typeof document.addEventListener != 'underfind') {
         document.addEventListener('load', fn, false);
     }
     else if (typeof window.attachEvent != 'underfind') {
         window.attachEvent('onload', fn);
     }
     else {
         var oldfn = window.onload;
         if (typeof window.onload != 'funtion') {
             window.onload = fn;
         }
         else {
             window.onload = funtion()
             {
                 oldfn();
                 fn();
             };
         }
     }
 }
 addLoadListener(movetab);

转载于:https://my.oschina.net/u/919022/blog/144666