以下是封装函数：

// 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. LeetCode & Q217-Contains Duplicate-Easy

    Array Hash Table Description: Given an array of integers, find if the array contains any duplicates. ...

  2. JAVA 中一个非常轻量级只有 200k 左右的 RESTful 路由框架

    ICEREST 是一个非常轻量级只有 200k 左右的 RESTful 路由框架,通过 ICEREST 你可以处理 url 的解析,数据的封装, Json 的输出,和传统的方法融合,请求的参数便是方法 ...

  3. UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 1987: illegal multibyte sequence

    在爬取 url = "http://stats.meizhou.gov.cn/show/index/1543/1689" 时出现了问题: UnicodeEncodeError: ' ...

  4. NOPI实现导入导出泛型List，支持自定义列

    概述 业务上需要自定义列的Excel的导入导出,在网上看了好多资料,很多都是有Bug而且都是支持Excel和DataTable的转换,所以自己总结了一下,应用.NET平台上的NPOI封装了支持自定义列 ...

  5. Spring整合MyBaytis

    1.准备jar包 A.第一种方式:配置SqlSessionFactoryBean+配置SqlSessionTemplate a.项目结构 b.applicationContext.xml  带详细注释 ...

  6. WPF在在设计模式，使用动态样式

    1.问题分析 WPF有时候要用到主题样式,比如颜色主题(红色.黄色之类的)通常是key相同,而value不同,比如会这么写: Background="{DynamicResource Bac ...

  7. 【机器学习】Iris Data Set（鸢尾属植物数据集）

    注:数据是机器学习模型的原材料,当下机器学习的热潮离不开大数据的支撑.在机器学习领域,有大量的公开数据集可以使用,从几百个样本到几十万个样本的数据集都有.有些数据集被用来教学,有些被当做机器学习模型性 ...

  8. html2canvas 实现dashed虚线边框

    html2canvas是一个将html元素生成canvas的库,绘制的canvas大部分样式和CSS一致.比如截止1.0.0-alpha.12,虚线边框依然绘制为实线,border-collapse依 ...

  9. Web SCADA 电力接线图工控组态编辑器

    前言 SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步.如SVG可以内嵌于其他的XML文档中,而SVG文档中 ...

  10. Jenkins: Can't connect to Docker daemon解决办法

    Jenkins安装后首次使用报错: Jenkins: Can't connect to Docker daemon 解决办法: 参照StackOverflow 添加jenkins用户到dockergr ...