<html>

 <head>

     <title></title>

     <meta charset="UTF-8">

     <style>

         *{ padding:0; margin:0;}

         .block{ display:block;}

         .none{ display:none;}

         #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}

         #tab1,#tab2{ list-style:none;}

         #tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}

         #tab2 li:hover{ background:#CCC;}

         #tab1 li.on,#tab2 li.on{ background:#9C3;}

         #wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}

     </style>

 </head>

 <body>

 <div id="wrap">

     <ul id="tab1">

         <li class="on">第一项</li>

         <li>第二项</li>

         <li>第三项</li>

     </ul>

     <br clear="all" />

     <div class="block">第一部分</div>

     <div class="none">第二部分</div>

     <div class="none">第三部分</div>

 </div>

 <div id="wraps">

     <ul id="tab2">

         <li class="on">第一项</li>

         <li>第二项</li>

         <li>第三项</li>

     </ul>

     <br clear="all" />

     <div class="block">第一部分</div>

     <div class="none">第二部分</div>

     <div class="none">第三部分</div>

 </div>

 <script type="text/javascript">

     tab("wrap","tab1","mouseover")

     tab("wraps","tab2");

     function tab(wrap,navul,eve){

 //tab效果封装，目前只有两种变换方式，一种为点击事件click（也是默认事件），另外一种为鼠标移过事件mouseover

         var divs=document.getElementById(wrap).getElementsByTagName("div");

         var lis=document.getElementById(navul).getElementsByTagName("li");

         for(var i=0;i<lis.length;i++){

             lis[i].indx=i;

             if(eve=="click" || eve==null){

                 lis[i].onclick=function(){

                     for(i=0;i<lis.length;i++){

                         lis[i].className="";

                         divs[i].className="none";

                         this.className="on";

                         divs[this.indx].className="block";

                     }

                 }

             }else if(eve=="mouseover"){

                 lis[i].onmouseover=function(){

                     for(i=0;i<lis.length;i++){

                         lis[i].className="";

                         divs[i].className="none";

                         this.className="on";

                         divs[this.indx].className="block";

                     }

                 }

             }

         }

     }

 </script>

 </body>

 </html>

js封装tab标签页的更多相关文章

  1. 整理用js实现tab标签页

    首先是css样式,比如这样的: <style> *{ ; ; list-style: none; font-size: 12px; } .notice{ width: 298px; hei ...

  2. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  3. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  4. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

  5. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  6. ExtJS配置TabPanel可以拖拽Tab标签页

    1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...

  7. Bootstrap插件——(Tab)标签页

    项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...

  8. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  9. VIM 实现tab标签页及分屏，切换命令

    1,在一个窗口中,VIM 的小tab标签页命令:   :tabnew [++opt选项] ［+cmd］ 文件            建立对指定文件新的tab :tabc       关闭当前的tab ...

随机推荐

  1. CLR via C#深解笔记六 - 泛型

    面向对象编程一个好处就是“代码重用”,极大提高了开发效率.如是,可以派生出一个类,让它继承基类的所有能力,派生类只需要重写虚方法,或添加一些新的方法,就可以定制派生类的行为,使之满足开发人员的需求. ...

  2. Go语言TCP/UDP Socket编程

    1. TCP编程 TCPClient // TCPClient project main.go package main import ( "fmt" "net" ...

  3. 二十七、EFW框架BS系统开发中的MVC模式探讨

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

  4. [转]MySQL与MongoDB的操作对比

    MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL的数据库.它们各有各的优点,关键是看用在什么地方 ...

  5. java攻城狮之路(Android篇)--与服务器交互

    一.图片查看器和网页源码查看器 在输入地址的是不能输入127.0.0.1 或者是 localhost.ScrollView :可以看成一个滚轴 可以去包裹很多的控件在里面 练习1(图片查看器): pa ...

  6. Unity 中的协同程序

    今天咱就说说,协同程序coroutine.(这文章是在网吧敲的,没有unity,但是所有结论都被跑过,不管你信得过我还是信不过我,都要自己跑一下看看,同时欢迎纠错)先说说啥是协程:协同程序是一个非常让 ...

  7. Linux命令：ps / top

    简介:ps - report a snapshot of the current processes. 用途:获取当前时刻程序运行状态 概要:ps [options] 类型:ps is hashed ...

  8. 想从事分布式系统，计算，hadoop等方面，需要哪些基础，推荐哪些书籍？--转自知乎

    作者:廖君链接:https://www.zhihu.com/question/19868791/answer/88873783来源:知乎 分布式系统(Distributed System)资料 < ...

  9. Cool！12幅由小图片组成的创意图像重组作品

    这里分享15幅创意插图作品,这些创意插图作品都是有成千上万的小图片组成的,很多创意广告会采用这个形式的设计.下面这组创意作品的作者是 Charis Tsevis,来自希腊的视觉设计师,擅长图像重组的创 ...

  10. Slip.js – 在触摸屏上实现列表的滑动排序功能

    Slip.js 是一个很小的 JavaScript 库,用于实现对触摸屏的互动 Swipe 和对元素重新排序列表(Reordering).Slip.js 没有任何的依赖,你可以通过自定义 DOM 事件 ...