以下是封装函数：

// 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. 数据库 MYSQL操作（一）

    数据库  MYSQL操作总结(一) 本文主要介绍一下笔者在使用数据库操作的过程中的一些总结,主要的内容包括一下几个内容: 一.mysql 使用基础(主要包括数据库的安装.基本操作等内容) 二.mysq ...

  2. mybatis的mapper接口代理使用的三个规范

    1.什么是mapper代理接口方式? MyBatis之mapper代理方式.mapper代理使用的是JDK的动态代理策略 2.使用mapper代理方式有什么好处 使用这种方式可以不用写接口的实现类,免 ...

  3. Spring知识点回顾（01）Java Config

    Spring知识点回顾(01) 一.Java Config 1.服务和服务注入 2.Java 注解 :功能更强一些 3.测试验证 二.注解注入 1.服务和服务注入 2.配置加载 3.测试验证 三.总结 ...

  4. 新概念英语（1-11）Is this your shirt ?

    Is this your shirt?Whose shirt is white? A:Whose shirt is that? Is this your shirt, Dave? Dave:No si ...

  5. python网络爬虫与信息提取 学习笔记day2

    Day2: 查看robots协议: 查看京东的robots协议 查看百度的robots协议,可以看到百度拒绝了搜狗的爬虫233 爬取京东商品页面相关信息: import requests url = ...

  6. 关于css的层叠上下文和层叠顺序问题

    关于css的层叠上下文和层叠样式问题 最近在项目中遇到了一个让我欲仙欲死的问题,我给项目中的图片设置了一个淡入效果,几opacity变化,但当我在它的上面有一个定位元素时,动画结束后,定位元素居然被遮 ...

  7. Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)

    1.  PyCharm的快捷键 2 . PyCharm的常用设置和扩展 ---------------------------------------------------------------- ...

  8. Spring（一）：eclipse上安装spring开发插件&下载Spring开发包

    eclipse上安装spring开发插件 1)下载安装插件包:https://spring.io/tools/sts/all 由于我的eclipse版本是mars 4.5.2,因此我这里下载的插件包是 ...

  9. html标记语言 --文本标记

    html标记语言 --文本标记 二.文本标记 1.h1-h6 标题标记,h1最大 2.font 字体设置标记 2.1 size字体大小.<font size="> 取值范围1-7 ...

  10. app 下载更新 file-downloader 文件下载库的简单介绍和使用

    app 下载更新 file-downloader 文件下载库的简单介绍和使用 今天介绍一个下载库:file-downloader 文件下载库 说明: * 本文内容来自原 file-downloader ...