5选项卡(封装插件版)加事件委托版选项卡
2024-06-05 21:45:36
HTML代码(两款HTML选项卡代码)：
第一款：非事件委托版HTML代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>非事件委托</title><style type="text/css">* {margin: 0;padding: 0;color: #424242;font-size: 14px;}ul, li {list-style: none;}.tabBox {margin: 10px auto;width: 600px;overflow: hidden;}.tabBox ul {position: relative;top: 1px;overflow: hidden;}.tabBox ul li {/*float: left;*/display: inline-block;margin-right: 10px;width: 80px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;border: 1px solid green;}.tabBox ul li.bg {background: lightblue;border-bottom-color: lightblue;}.tabBox div {display: none;height: 100px;line-height: 100px;text-align: center;border: 1px solid green;background: lightblue;}.tabBox div.bg {display: block;}</style>
</head>
<body>
<div class="tabBox"><ul><li class="bg">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="bg">1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div><div class="tabBox"><ul><li class="bg">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="bg">1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div><script charset="UTF-8" type="text/javascript" src="js/utils.min.js"></script>
<script type="text/javascript">var allTabBox = utils.getElementsByClass("tabBox");for(var i = 0; i<allTabBox.length;i++){tabChange(allTabBox[i]);}//->选项卡切换的操作封装成插件function tabChange(tabBox){//var tabBox = document.getElementById("curId");var tabBoxUl = utils.firstChild(tabBox);//->第一个ulvar oLis = utils.children(tabBoxUl, "li");//->第一个ul所有子元素的livar divList = utils.children(tabBox, "div");//->所有容器子元素中的divfor (var i = 0; i < oLis.length; i++) {var curLi = oLis[i];curLi.index = i;curLi.onclick = function () {//->
utils.addClass(this, "bg");var curLiSibling = utils.siblings(this);//当前li的所有兄弟for (var k = 0; k < curLiSibling.length; k++) {utils.removeClass(curLiSibling[k], "bg");//兄弟的都移除掉
}//->for (k = 0; k < divList.length; k++) {k === this.index ? utils.addClass(divList[k], "bg") : utils.removeClass(divList[k], "bg");}};}}
</script>
</body>
</html>第二款：事件委托版HTML代码：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>事件委托/事件代理</title><style type="text/css">* {margin: 0;padding: 0;color: #424242;font-size: 14px;}ul, li {list-style: none;}.tabBox {margin: 10px auto;width: 600px;overflow: hidden;}.tabBox ul {position: relative;top: 1px;overflow: hidden;}.tabBox ul li {/*float: left;*/display: inline-block;margin-right: 10px;width: 80px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;border: 1px solid green;}.tabBox ul li.bg {background: lightblue;border-bottom-color: lightblue;}.tabBox div {display: none;height: 100px;line-height: 100px;text-align: center;border: 1px solid green;background: lightblue;}.tabBox div.bg {display: block;}</style>
</head>
<body>
<div class="tabBox"><ul zhufengFlag="firUl"><li class="bg">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="bg">1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div><div class="tabBox"><ul zhufengFlag="firUl"><li class="bg">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="bg">1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div><script charset="UTF-8" type="text/javascript" src="js/utils.min.js"></script>
<script type="text/javascript">//1、事件委托//->利用了事件的冒泡传播机制，如果一个容器A中有很多的后代元素需要绑定点击事件(其他行为统同样可以)，这样的话我就不需要一个个获取绑定了，只需要给最外层的容器A绑定一个点击事件即可，这样不管里面那个元素触发了点击的行为，A点击行为对应的方法都会执行，我们在这里通过判断事件源是谁来实现不同的操作即可var allTabBox = utils.getElementsByClass("tabBox");for (var i = 0; i < allTabBox.length; i++) {allTabBox[i].onclick = function (e) {e = e || window.event;var curTar = e.target || e.srcElement;//->通过条件确定我们点击的是页卡区域的LIif (curTar.tagName.toUpperCase() === "LI" && curTar.parentNode.getAttribute("zhufengFlag") === "firUl") {//->让当前点击的这个LI有选中的样式,而其兄弟元素都移除选中样式
utils.addClass(curTar, "bg");//当前事件源var curLiSibling = utils.siblings(curTar);for (var k = 0; k < curLiSibling.length; k++) {utils.removeClass(curLiSibling[k], "bg");}//->让和当前点击LI索引对应的那个DIV有选中的样式,其余的DIV移除选中样式var curTarIndex=utils.index(curTar);var divList=utils.nextAll(curTar.parentNode);//->父节点下所有的弟弟for (k = 0; k < divList.length; k++) {k === curTarIndex ? utils.addClass(divList[k], "bg") : utils.removeClass(divList[k], "bg");}}};}
</script>
</body>
</html>util.js加密后的JS代码：
var utils=function(){function listToArray(a){var b,c;if(flag)return Array.prototype.slice.call(a,0);for(b=[],c=0;c<a.length;c++)b[b.length]=a[c];return b}function formatJSON(jsonStr){return"JSON"in window?JSON.parse(jsonStr):eval("("+jsonStr+")")}function offset(a){for(var b=a.offsetLeft,c=a.offsetTop,d=a.offsetParent;d;)-1===navigator.userAgent.indexOf("MSIE 8")&&(b+=d.clientLeft,c+=d.clientTop),b+=d.offsetLeft,c+=d.offsetTop,d=d.offsetParent;return{left:b,top:c}}function win(a,b){return"undefined"==typeof b?document.documentElement[a]||document.body[a]:(document.documentElement[a]=b,document.body[a]=b,void 0)}function children(a,b){var d,e,f,g,h,i,c=[];if(flag)c=this.listToArray(a.children);else{for(d=a.childNodes,e=0,f=d.length;f>e;e++)g=d[e],1===g.nodeType?c[c.length]=g:null;d=null}if("string"==typeof b)for(h=0;h<c.length;h++)i=c[h],i.nodeName.toLowerCase()!==b.toLowerCase()&&(c.splice(h,1),h--);return c}function prev(a){if(flag)return a.previousElementSibling;for(var b=a.previousSibling;b&&1!==b.nodeType;)b=b.previousSibling;return b}function next(a){if(flag)return a.nextElementSibling;for(var b=a.nextSibling;b&&1!==b.nodeType;)b=b.nextSibling;return b}function prevAll(a){for(var b=[],c=this.prev(a);c;)b.unshift(c),c=this.prev(c);return b}function nextAll(a){for(var b=[],c=this.next(a);c;)b.push(c),c=this.next(c);return b}function sibling(a){var b=this.prev(a),c=this.next(a),d=[];return b?d.push(b):null,c?d.push(c):null,d}function siblings(a){return this.prevAll(a).concat(this.nextAll(a))}function index(a){return this.prevAll(a).length}function firstChild(a){var b=this.children(a);return b.length>0?b[0]:null}function lastChild(a){var b=this.children(a);return b.length>0?b[b.length-1]:null}function append(a,b){b.appendChild(a)}function prepend(a,b){var c=this.firstChild(b);return c?(b.insertBefore(a,c),void 0):(b.appendChild(a),void 0)}function insertBefore(a,b){b.parentNode.insertBefore(a,b)}function insertAfter(a,b){var c=this.next(b);return c?(b.parentNode.insertBefore(a,c),void 0):(b.parentNode.appendChild(a),void 0)}function hasClass(a,b){var c=new RegExp("(^| +)"+b+"( +|$)");return c.test(a.className)}function addClass(a,b){var d,e,f,c=b.replace(/(^ +| +$)/g,"").split(/ +/g);for(d=0,e=c.length;e>d;d++)f=c[d],this.hasClass(a,f)||(a.className+=" "+f)}function removeClass(a,b){var d,e,f,g,c=b.replace(/(^ +| +$)/g,"").split(/ +/g);for(d=0,e=c.length;e>d;d++)f=c[d],this.hasClass(a,f)&&(g=new RegExp("(^| +)"+f+"( +|$)","g"),a.className=a.className.replace(g," "))}function getElementsByClass(a,b){var c,d,e,f,g,h,i,j,k;if(b=b||document,flag)return this.listToArray(b.getElementsByClassName(a));for(c=[],d=a.replace(/(^ +| +$)/g,"").split(/ +/g),e=b.getElementsByTagName("*"),f=0,g=e.length;g>f;f++){for(h=e[f],i=!0,j=0;j<d.length;j++)if(k=new RegExp("(^| +)"+d[j]+"( +|$)"),!k.test(h.className)){i=!1;break}i&&(c[c.length]=h)}return c}function getCss(a){var b=null,c=null;return flag?b=window.getComputedStyle(this,null)[a]:"opacity"===a?(b=this.currentStyle["filter"],c=/^alpha\(opacity=(\d+(?:\.\d+)?)\)$/,b=c.test(b)?c.exec(b)[1]/100:1):b=this.currentStyle[a],c=/^(-?\d+(\.\d+)?)(px|pt|em|rem)?$/,c.test(b)?parseFloat(b):b}function setCss(a,b){if("float"===a)return this["style"]["cssFloat"]=b,this["style"]["styleFloat"]=b,void 0;if("opacity"===a)return this["style"]["opacity"]=b,this["style"]["filter"]="alpha(opacity="+100*b+")",void 0;var c=/^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;c.test(a)&&(isNaN(b)||(b+="px")),this["style"][a]=b}function setGroupCss(a){for(var b in a)a.hasOwnProperty(b)&&setCss.call(this,b,a[b])}function css(a){var b=arguments[1],c=Array.prototype.slice.call(arguments,1);if("string"==typeof b){if("undefined"==typeof arguments[2])return getCss.apply(a,c);setCss.apply(a,c)}b=b||0,"[object Object]"===b.toString()&&setGroupCss.apply(a,c)}var flag="getComputedStyle"in window;return{win:win,offset:offset,listToArray:listToArray,formatJSON:formatJSON,children:children,prev:prev,next:next,prevAll:prevAll,nextAll:nextAll,sibling:sibling,siblings:siblings,index:index,firstChild:firstChild,lastChild:lastChild,append:append,prepend:prepend,insertBefore:insertBefore,insertAfter:insertAfter,hasClass:hasClass,addClass:addClass,removeClass:removeClass,getElementsByClass:getElementsByClass,css:css}}();转载于:https://www.cnblogs.com/kpengfang/p/5447319.html
5选项卡(封装插件版)加事件委托版选项卡相关推荐
- Winform模态窗体关闭时赋值给打开自身的窗体（C# 事件委托版）
在日常开发中,经常要打开一个模态窗体,在模态窗体中选择某一项,然后把这项的ID或者Name赋值给打开这个模态窗体的窗体-- 在Windows 客户端中,要实现这样的功能是非常简单的,代码也会很优美.当 ...
- Java用TCP手写聊天室 可以 私聊版加群聊版
一:引言 想要私聊必须有规定的格式:@名字:要说的话 二:上码 1.服务端 package com.wyj.talkhome; /** * 实现一个用户可以接发多条消息 * * */ import j ...
- 猜字游戏（python版加C语言版）
python版猜字游戏,代码如下: import randomclass Error(Exception):passclass TooSmallError(Error):passclass TooLa ...
- JavaScript之jQuery够用即可（事件委托、动画效果、扩展插件）
文章目录 一.事件委托 二.JS的动画效果 三.扩展插件 一.事件委托 1.事件委托 其实就是给对象绑定一个事件,但是委托给它所属的每一个子对象了,因此每一个子对象都具有添加进的功能 书写格式如下: ...
- 使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]
使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版] 原理: W3C将DOM2.0模型中事件处理流程分为三个阶段: 一.事件捕获阶段: 当某个元素触发某个事件(如onclic ...
- 事件委托、动画、插件
1. 动画 1.1 显示/隐藏 Hide() : 隐藏,无参是直接隐藏,第一个参数是毫秒数 show() : 显示,无参是直接显示出来,第一个参数是毫秒数 toggle() : 切换,显示就变隐藏,隐 ...
- dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件
1.e.type获取事件类型,例如click input focus <input type="text"> <script>let input=docum ...
- web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
- Visual Studio 2017,C++MFC免注册调用大漠插件图文教程，详细版
Visual Studio 2017,C++MFC免注册调用大漠插件图文教程,详细版 前言 提示:这里可以添加本文要记录的大概内容: 有很多人都在问C++MFC怎么免注册调用?其实这些都有参考但是对于 ...
最新文章
- 【目标检测】(8) ASPP改进加强特征提取模块，附Tensorflow完整代码
- 适用于OpenGL离屏渲染上下文的初始化代码
- Gartner 2019年超融合魔力象限：新增深信服，国内华为、华云在榜
- linux路由信息自动丢失,浅谈用expect实现路由器自动备份数据
- MVC学习（四）几种分页的实现（3）
- noi.ac NOIP2018 全国热身赛 第四场 T1 tree
- ElasticSearch入门 附.Net Core例子
- DataBinder.Eval数据绑定中的使用
- log4net简单配置与应用
- mft文件记录属性头包括_学懂主流NTFS分区文件系统，你也可以成为MM眼中的大神！...
- opencv打开双目，采集标定双目的图片
- 小米5Splus_2016070_官方线刷包_救砖包_解账户锁
- Java 14中对switch的增强，终于可以不写break了
- 微信公众平台中业务域名，JS接口安全域名，网页授权域名配置的MP_verify_liCemlZVM1G3rJPy.txt文件放置位置
- scikit-learn中的PCA
- 在本地计算机无法启动clipbook,依赖服务组无法启动 win7依赖服务或组无法启动 怎么弄啊...
- Transformer15
- 汉明码（海明码）计算，模板套用易懂！
- MMA安装及使用优化
- Oracle 数据库表中已有重复数据添加唯一键（唯一约束）