文档章节

简单的 HTML Tab 标签

小妖同学
 小妖同学
发布于 2013/07/15 10:15
字数 545
阅读 25
收藏 0
点赞 0
评论 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
无锡
tab标签切换原理总结

首先tab标签的思路就是当鼠标单击时候能够切换窗口内容,也就是说要有两个框,其中一个是头部,一个是与头部关联的框。 <div>我是标题</div> <div>我是内容</div> 而其中它的切换时由很多这种...

如风般魅影 ⋅ 2014/03/18 ⋅ 0

简洁后台管理模版

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

Jeff.Zhong ⋅ 2017/12/01 ⋅ 0

使用VSCode编写jsx代码时如何实现标签自动补齐

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

沉迷学习中 ⋅ 04/22 ⋅ 0

教你两招用纯CSS写Tab切换

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

璿而不华 ⋅ 05/30 ⋅ 0

Dojo学习4 让页面更有条理:dijit.layout.TabContainer

让页面更有条理:dijit.layout.TabContainer 当一个页面内容比较多,比较复杂的时候,可以用标签页,将功能类似的一些表格或者信息放在同一个标签页内,用户可以方便的在不同的标签页之间切换...

元来元去 ⋅ 2010/11/02 ⋅ 0

JQ focus blur focusin focuseout

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

喝牛奶对身体好 ⋅ 2016/08/01 ⋅ 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

网站优化:按需加载数据

这里的按需加载资源不只是CSS、JS文件,Image、swf、Content等都可以利用这种方式。特别是当前Yahoo的首页:http://www.yahoo.com,几乎页面的每一个模块都体现了按需加载的技巧:左边的导航...

黄平俊 ⋅ 2010/10/14 ⋅ 1

Android 用户界面---操作栏(Action Bar 四)

创建一个定制的操作提供器 当你想要创建一个有动态行为和在溢出菜单中有默认图标的操作视窗时,,继承ActionProvider类来定义这些行为是一个比好的的方案。创建自己的操作提供器,提供一个有...

长平狐 ⋅ 2012/10/16 ⋅ 0

火狐标签管理器--Tab Candy

浏览器的作用在过去十年内取得突飞猛进的发展,如今人们在网上同时处理多个任务,比如计划出行、购物、分享图片、听音乐、查看邮件、撰写博客等。这就为浏览器的标签显示带来了挑战,因为同时...

匿名 ⋅ 2010/07/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 34分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 37分钟前 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 47分钟前 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 49分钟前 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 今天 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部