以下是封装函数：

// 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. 深度学习之 rnn 台词生成

    深度学习之 rnn 台词生成 写一个台词生成的程序,用 pytorch 写的. import os def load_data(path): with open(path, 'r', encoding ...

  2. spring-oauth-server实践：使用授权方式四：client_credentials 模式的客户端和服务端交互

    spring-oauth-server入门(1-11)使用授权方式四:client_credentials 模式的客戶端 一.客户端逻辑 1.界面入口(credentials_access_token ...

  3. Python 自动化 第一周

    1.Python简介 1.1.Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时 ...

  4. CentOS7配置php7.0支持redis

    配置之前应该是环境已经搭好了,phpinfo的页面可以加载出来. 使用git clone下载git上的phpredis扩展包 [root@VM_103_117_centos ]#git clone   ...

  5. python--socket/Socketerver并发/udp

    Socketerve并发 基于tcp套接字,关键就是两个循环,一个链接循环,一个通讯循环 Socketserver模块中分两个大类:server类(解决链接问题)和request类(解决通信问题) s ...

  6. python打包压缩文件夹zip+组装文件夹

    无意间想到的一个需求,然后就顺手写了写,留下来,方便以后用 列表版:(基本没用,仅提供思路,字典版稍微改动可以直接用) 大体需求: 把重复的文件名进行改名,达到浏览器下载相同文件的效果 下载完成后再把 ...

  7. 使用 RHEL(RedHat)6.1 iso 安装包 安装Samba过程

    今天因为工作的需要安装了(RHEL)redhat 6.1 自己为了方便就安装Samba 以记之. 注:Linux系统是刚刚安装好的所以没有samba安装的任何记录. 安装准备: ISO:RHEL_6. ...

  8. 基于DFS的拓扑排序

    传送门:Kahn算法拓扑排序 摘录一段维基百科上的伪码: L ← Empty list that will contain the sorted nodes S ← Set of all nodes ...

  9. hdu 6095 Rikka with Competition---思维题贪心

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6095 题目大意: 任意两个人相比,相差大于K,分低的淘汰,否则两人都有可能赢,剩下的继续比,问有最多 ...

  10. POJ-1700 Crossing River---过河问题（贪心）

    题目链接: https://vjudge.net/problem/POJ-1700 题目大意: 有N个人要渡河,但是只有一艘船,船上每次最多只能载两个人,渡河的速度由两个人中较慢的那个决定,小船来回载 ...