文档章节

简单的 HTML Tab 标签

小妖同学
 小妖同学
发布于 2013/07/15 10:15
字数 545
阅读 35
收藏 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
无锡
私信 提问
使用VSCode编写jsx代码时如何实现标签自动补齐

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

沉迷学习中
04/22
0
0
简洁后台管理模版

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

Jeff.Zhong
2017/12/01
0
0
火狐标签管理器--Tab Candy

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

匿名
2010/07/27
1K
0
JQ focus blur focusin focuseout

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

喝牛奶对身体好
2016/08/01
14
0
网站优化:按需加载数据

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

黄平俊
2010/10/14
691
1

没有更多内容

加载失败,请刷新页面

加载更多

webpack4 css打包、压缩、分离、去重等优化配置详解

Webpack 4 目前版本已经到了4.27 相较于前面的版本还是有一些改动的,具体可以参考升级指南 迁移到新版本 这里只介绍 css 的 打包、压缩、分离、去重 的方法; 不懂的或者有更优的方案,欢迎...

zerokb-小浪
7分钟前
0
0
基于协同过滤算法的推荐

基于协同过滤算法的推荐 (本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 数据挖掘的一个经典案例就是尿布与啤酒的例子。尿布与啤酒看似毫不相关的两种产品,但是当超市将两种产...

阿里云官方博客
15分钟前
0
0
Tomcat配置强制https端口变成8443的解决办法

Tomcat配置强制https端口变成8443的解决办法 2017年10月18日 10:44:10 我们始终是路人 阅读数:2953 标签: tomcathttps8443443 更多 个人分类: Tomcat 版权声明:本文为博主原创文章,未经...

linjin200
17分钟前
0
0
基于协同过滤算法的推荐

基于协同过滤算法的推荐 (本实验选用数据为真实电商脱敏数据,仅用于学习,请勿商用) 数据挖掘的一个经典案例就是尿布与啤酒的例子。尿布与啤酒看似毫不相关的两种产品,但是当超市将两种产...

阿里云云栖社区
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部