文档章节

简单的 HTML Tab 标签

小妖同学
 小妖同学
发布于 2013/07/15 10:15
字数 545
阅读 28
收藏 0

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);



© 著作权归作者所有

共有 人打赏支持
小妖同学
粉丝 4
博文 2
码字总数 1531
作品 0
无锡
简洁后台管理模版

原文地址:简洁后台管理模版 之前给客户开发一个简单的后台管理系统,本来准备套用AdminLTE的,但客户嫌弃太臃肿,而且又需要有多tab页面切换,于是从我代码库中找到好久前就写过的管理后台,...

Jeff.Zhong
2017/12/01
0
0
使用VSCode编写jsx代码时如何实现标签自动补齐

VSCode是kiddd最喜欢的编辑器,极简而灵活,丰富而且继续丰富着的插件库,配置简单,都吸引着我。众所周知,VSCode在编写HTML代码时可以tab键自动补齐标签。然而在编写.jsx文件的代码时,嵌套...

沉迷学习中
04/22
0
0
教你两招用纯CSS写Tab切换

说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: 方法一:模拟单选框原理 关于...

璿而不华
05/30
0
0
JQ focus blur focusin focuseout

查阅资料后发现通常默认情况下div是没有focusable属性的,因此在给div元素绑定了事件的时候,不管有没有聚集焦点,函数中的事件都不会发生,所以在绑定的div标签后面添加tabindex="1",加上f...

喝牛奶对身体好
2016/08/01
14
0
EdwinHui/Bootstrap-Multitabs

bootstrap-multitabs / bootstrap 多标签页 效果图 default/默认 (带有向左、向右移动以及选项菜单) Demo: nav-tabs and nav-pills classic/折叠 (折叠隐藏tab) Demo: nav-tabs and nav-pil...

EdwinHui
2016/11/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash重定向详解

Bash重定向详解 Bash的重定向指的是将命令的输入和输出导向不同地方,而不是默认的标准输入、标准输出和标准错误。Bash的重定向实际上是对标准输入、标准输出和标准错误的重置,进而将所需输...

小陶小陶
9分钟前
0
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
5
0
OpenCV图像处理实例:libuv+cvui显示摄像头视频

#include <iostream>#include <opencv2/opencv.hpp>#define CVUI_IMPLEMENTATION#include <cvui.h>extern "C"{#include <uv.h>}using namespace std;#define WINDOW_NAM......

IOTService
今天
3
0
openJDK之JDK9的String

1.openJDK8的String 先来看下openJDK8的String的底层,如下图1.1所示: 图1.1 底层上使用的是char[],即char数组 每个char占16个bit,Character.SIZE的值是16。 2.openJDK9中的String 图2.1...

克虏伯
今天
3
0
UEFI 模式下如何安装 Ubuntu 16.04

作者:知乎用户 链接:https://www.zhihu.com/question/52092661/answer/259583475 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 针对UEFI模式下安装U...

寻知者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部