以下是封装函数：

// id：最外边大盒的id名
function tab(id,ev){
                var oWrap = document.getElementById(id);
                var aLi = oWrap.getElementsByTagName("li");
                var aDiv = oWrap.getElementsByTagName("div");                
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index = i;
                    aLi[i][ev]=function(){
                        // [ev]:触发的是什么事件，比如.onclick，这里用[参数]，中括号中可以传递不同的事件
                        for(var i=0;i<aLi.length;i++){
                            aLi[i].className="";
                        aDiv[i].className="";
                        }
                        this.className="active";
                    aDiv[this.index].className="show";
                    }
                }
            }

以下是格式：

<body>
        <div class="wrap" id="tab">
            <ul >
                <li class="active">新闻</li>
                <li>体育</li>
                <li>财经</li>
            </ul>
            <div class="show">NewsNewsNewsNewsNewsNews</div>
            <div>playplayplayplayplayplay</div>
            <div>financefinancefinancefinance</div>
        </div>
        
        <div class="wrap" id="tab2">
            <ul >
                <li class="active">新闻</li>
                <li>体育</li>
                <li>财经</li>
            </ul>
            <div class="show">NewsNewsNewsNewsNewsNews</div>
            <div>playplayplayplayplayplay</div>
            <div>financefinancefinancefinance</div>
        </div>
    </body>

以下是css样式及函数调用：

<style>
            body,ul,li,div{margin:0; padding:0;}
            ul{list-style: none;}
            .wrap{width:300px;height:300px;margin:100px auto 0;border:1px #ccc solid;}
            .wrap ul{height:30px;background: #CCCCCC;}
            .wrap ul li{padding:0 20px;float:left;font:14px/30px "微软雅黑";line-height: 30px;}
            .wrap ul .active{background: #fff;border-top:3px #FF1493 solid;line-height: 27px;}
            .wrap div{display: none;}
            .wrap .show{display: block;}
        </style>
        <script src="js/tab_js.js" type="text/javascript"></script>
        <script>
            window.onload=function(){
                tab("tab","onclick");
                tab("tab2","onmouseover")
            }
        </script>

以后只需调用函数就可以了，可以将事件形式以实参的方式传进去，更改事件触发属性

选项卡js版封装的更多相关文章

  1. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  2. JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    原文:http://www.cnblogs.com/liuxianan/p/pinyinjs.html 前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多 ...

  3. JS版汉字与拼音互转终极方案，附简单的JS拼音

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  4. Blazor组件自做五 : 使用JS隔离封装Google地图

    Blazor组件自做五: 使用JS隔离封装Google地图 运行截图 演示地址 正式开始 1. 谷歌地图API 谷歌开发文档 开始学习 Maps JavaScript API 的最简单方法是查看一个简 ...

  5. JS 对象封装的常用方式

    JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...

  6. Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)

    之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...

  7. 团购、定时抢购倒计时js版

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

  8. JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

  9. PureMVC(JS版）源码解析：总结

    PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...

随机推荐

  1. Connect Appium Server Fail.A new session could not be created

    1．由于安卓测试机性能低下,并不能支持测试工作,想安装一个模拟器帮助测试,然后发现群里有朋友发了一个夜神模拟器..下载..安装..美滋滋的准备运行脚本.What..居然报错了..orz..然后百度查找 ...

  2. 常用的汇编指令 movs stos

    movsb   把寄存机esi所存的地址的数据以字节复制到edi movsw  把寄存机esi所存的地址的数据以word复制到edi movsd   把寄存机esi所存的地址的数据以dword复制到e ...

  3. asp.net(C#)实现功能强大的时间日期处理类完整实例

    作者:smartsmile2012 字体:[增加 减小] 类型:转载 时间:2016-06-30我要评论 这篇文章主要介绍了asp.net(C#)实现功能强大的时间日期处理类,封装了针对日期与时间的各 ...

  4. 设置Nginx+php-fpm显示错误信息

    Begin 最近在用PHP写后台程序,但是有错误不会显示简直坑爹,全都是200这样的错误代码而已= =... 于是 于是就搜索如何打开错误显示,然后就在博客里面记录一下 修改配置文件 /etc/php ...

  5. 批量导入数据到hive表中：假设我有60张主子表如何批量创建导入数据

    背景:根据业务需要需要把60张主子表批量入库到hive表. 创建测试数据: def createBatchTestFile(): Unit = { to ) { val sWriter = new P ...

  6. ZOJ-1203 Swordfish---最小生成树

    题目链接: https://vjudge.net/problem/ZOJ-1203 题目大意: 给定平面上N个城市的位置,计算连接这N个城市所需线路长度总和的最小值. 思路: 模板题 最小生成树,Pr ...

  7. Eureka服务注册中心

    Eureka服务注册中心 最近在研究Spring Cloud,发现其中的组件实在是太多了,真的是头大,只能一块一块看,像盲人摸象一样.要想很短时间内掌握Spring Cloud是不可能的,小编就学习一 ...

  8. hadoop in hue的搭建(基于cdh版本)

    首先官网下载tar包 http://archive.cloudera.com/cdh5/cdh/5/hue-3.9.0-cdh5.5.4.tar.gz 在安装hue之前,还需要安装各种依赖包,首先要检 ...

  9. Java基础学习（四）-- 接口、集合框架、Collection、泛型详解

    接口 一.接口的基本概念 关键字为:Interface,在JAVA编程语言中是一个抽象类型,是抽象方法的集合.也是使用.java文件编写.   二.接口声明 命名规范:与类名的命名规范相同,通常情况下 ...

  10. Linux（一）VMware虚拟机的安装

    vmware的安装文件: 链接:https://pan.baidu.com/s/1QGjNqRZzE-vV7Af0PI2QYA 密码:omfe 1.1 首先下载安装包 安装包的内容 1.2 双击exe ...