以下是封装函数：

// 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. linux下的Shell编程（3）shell里的流程控制

    if 语句 if 表达式如果条件命令组为真,则执行 then 后的部分.标准形式: if 判断命令,可以有很多个,真假取最后的返回值 then 如果前述为真做什么 [ # 方括号代表可选,别真打进去了 ...

  2. maven编译时出现读取XXX时出错invalid LOC header (bad signature)

    问题原因 该包没有下载正确. 解决办法 找到该包的目录,删除该包重新下载即可. 重新下载后用maven test一下,红叉消失.

  3. Tomcat（1-1）重置Tomcat8.5管理员的用户名和密码

    1.访问 http://localhost:8080/,点击 [manager app],提示输入用户名和密码,admin/admin后报错.  2.解决办法:重置Tomcat8.5管理员的用户名和密 ...

  4. Stanford依存句法关系解释

    ROOT:要处理文本的语句 IP:简单从句 NP:名词短语 VP:动词短语 PU:断句符,通常是句号.问号.感叹号等标点符号 LCP:方位词短语 PP:介词短语 CP:由'的'构成的表示修饰性关系的短 ...

  5. leetcode算法：Two Sum II - Input array is sorted

    Given an array of integers that is already sorted in ascending order, find two numbers such that the ...

  6. mysql中独立表空间与共享表空间之前如何切换

    环境 mysql版本:5.7.19 官方文档:(https://dev.mysql.com/doc/refman/5.7/en/innodb-multiple-tablespaces.html) 查看 ...

  7. PyQt5--基础篇：用eric6工具实现三级联动效果

    今天给大家介绍下python gui界面的三级联动效果,我们用工具eric6来实现,先看下效果图. 首先我们先创建项目linkage,再新建窗体进入到Qt设计师工具开始设计界面,完成后保存并退出. 在 ...

  8. AOV网络和Kahn算法拓扑排序

    1.AOV与DAG 活动网络可以用来描述生产计划.施工过程.生产流程.程序流程等工程中各子工程的安排问题.   一般一个工程可以分成若干个子工程,这些子工程称为活动(Activity).完成了这些活动 ...

  9. requests post一个json数据

    # post一个json数据 import requests headers={ "Accept":"application/json, text/plain, */*& ...

  10. C#扩展方法（转）

    扩展方法使您能够向现有类型"添加"方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型." 这是msdn上说的,也就是你可以对String,Int,DataRo ...