跨浏览器通用、可重用的选项卡tab切换js代码


Posted in Javascript onSeptember 20, 2011

由于近来学了点js,于是我装逼道。。。不太难吧。。。就切一下display属性?同学无视我。。说要搞个通用的。。。什么还要跟ajax交互。。???我愣是没有听懂。。。到底要搞什么。。。权当作练手,我自己胡弄了一个。

需求:同学口中的通用我不知道神马意思。。。那我就按自己的理解吧。。

①跨浏览器,IE6+,FF,Chrome,Safari,Opera

②同一个页面可以用同一个js设置不同的选项卡。

说太多没啥米用,来看代码吧。
一、html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过click事件触发,最后一个通过鼠标移动触发)

<div class="tab1"> 
<ul class="name"> 
<li>项目一</li> 
<li>项目二</li> 
<li>项目三</li> 
</ul> 
<ul class="content"> 
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li> 
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li> 
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li> 
</ul> 
</div> 
<div class="tab1"> 
<ul class="name"> 
<li>项目一</li> 
<li>项目二</li> 
<li>项目三</li> 
</ul> 
<ul class="content"> 
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li> 
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li> 
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li> 
</ul> 
</div> 
<div class="tab2"> 
<ul class="name"> 
<li>项目一</li> 
<li>项目二</li> 
<li>项目三</li> 
</ul> 
<ul class="content"> 
<li>类为<em>"tab2"</em>项目一内容,通过<em>"mouseover"</em>触发</li> 
<li>类为<em>"tab2"</em>项目二内容,通过<em>"mouseover"</em>触发</li> 
<li>类为<em>"tab2"</em>"项目三内容,通过<em>"mouseover"</em>触发</li> 
</ul> 
</div>

特别声明,由于我是菜鸟,所以,我写的js只能在某种特定的结构下运作(真菜!),没有想到怎么搞个极致的通用机制。这个js需要怎样的结构?那就是最外层一个div容器,标题由一个ul列表表示,内容也是一个ul列表。如果不是这种格式,我写的菜鸟代码是无法运行的(菜啊。。。),要运行,就要改改其中的几行js啦。。。
二、样式CSS
body{ 
text-align:center; 
} 
.tab1, .tab2 { 
width:350px; 
margin:0 5px; 
background:#CC9933; 
opacity:0.5; 
border-radius:5px 5px 5px 5px; 
box-shadow: #CCC 4px 4px 4px; 
text-align:left; 
float:left; 
display:inline; 
} 
.name { 
list-style:none; 
overflow:hidden; 
} 
.name li { 
width:90px; 
font:bold 16px/30px Verdana, Geneva, sans-serif; 
background:#669900; 
text-align:center; 
border-radius:5px 5px 5px; 
margin-right:5px; 
float:left; 
display:inline; 
cursor:pointer; 
} 
li.selected{ 
background:#FF9900; 
} 
.content li{ 
height:500px; 
display:none; 
}

 这貌似没什么好说的,加了些最简单的css3,凑合着(这美工好烂啊)。
三、js代码
/** 
* 事件处理通用函数 
*/ 
var EventUtil = { 
//跨浏览器取事件对象event 
getEvent : function(event){ 
return event ? event : window.event; 
}, 
//款浏览器取事件对象的目标DOM节点 
getTarget : function(event){ 
return event.target||event.srcElement; 
}, 
//跨浏览器对节点进行事件绑定 
addHandler : function(element,type,handler){ 
if(element.addEventListener){ 
element.addEventListener(type,handler,false); 
}else if(element.attachEvent){ 
element.attachEvent("on"+type,handler); 
}else{ 
element["on"+type] = handler; 
} 
} 
}; 
//设置选项卡切换方式 
tabSwitch("tab1","click"); 
tabSwitch("tab2","mouseover"); 
/** 
* 选项卡通用函数 
*/ 
// 传入参数inClassName设定为绑定的选项卡类名,参数triggerType设定为触发切换的类型 
function tabSwitch(inClassName,triggerType){ 
//取得全部选项卡区域 
if(document.querySelectorAll){ 
var tabs = document.querySelectorAll("."+inClassName); 
}else{ 
var divs = document.getElementsByTagName("div"); 
var tabs = new Array(); 
for(var k=0,lenDiv=divs.length; k<lenDiv; k++){ 
if(divs[k].className.indexOf(inClassName) > -1){ 
tabs.push(divs[k]); 
} 
} 
} 
//为每个选项卡建立切换功能 
for(var j=0,len=tabs.length; j<len; j++){ 
//获取标题和内容列表 
var tab = tabs[j]; 
//使用私有作用域为每个选项卡建立切换 
(function(){ 
var nameUl = tab.getElementsByTagName("ul")[0]; 
var content = tab.getElementsByTagName("ul")[1]; 
//初始化选项卡 
nameUl.getElementsByTagName("li")[0].className = "selected"; 
content.getElementsByTagName("li")[0].style.display = "block"; 
//添加事件委托 
EventUtil.addHandler(nameUl,triggerType,function(event){ 
//获取事件对象 
event = EventUtil.getEvent(event); 
var target = EventUtil.getTarget(event); 
//选项卡切换 
if(target.nodeName.toLowerCase() == "li"){ 
//分别取得标题列表项和内容列表项 
var nameList = nameUl.getElementsByTagName("li"); 
var contentList = content.getElementsByTagName("li"); 
//标题添加selected类,并显示内容 
for(var i=0,len=nameList.length; i<len; i++){ 
nameList[i].className = ""; 
contentList[i].style.display = "none"; 
if(nameList[i] == target){ 
nameList[i].className = "selected"; 
contentList[i].style.display = "block"; 
} 
} 
} 
}); 
})(); 
} 
}

就这js函数,我们展开一下吧(很不害羞啊)。。。首先定义了一些事件对象的通用函数,以应对跨浏览器时的使用。接着两行是选项卡切换的函数。一个参数是要定义为选项卡的容器的类,一个是触发切换的类型。

完了就是真正的js,思路是:定义为某个类的容器将会绑定成一个选项卡,切换的方式也可以自定义。tabSwitch("tab1","click");就是所有tab1类都绑定为选项卡,通过click事件切换。

实现切换用到了几个技术,其一,通过类选择器selectqueryAll对同一类型进行选择,为了兼容IE6、7,做了一个备用的遍历版本(非常低效);其二,使用了事件委托,在标题列表ul上绑定了触发事件。


抱怨一下,在取ul的DOM元素时,我用了name作为变量名,结果在chrome和safari绑定不了事件,这里搞了我好久啊!非常郁闷。。。

最后一提的是效果,这个东西有什么效果?就是选项卡切换(废话。。),选中的选项卡标题会添加一个类“selected”,方便设定样式。

最后的最后,我想说,还真有很多要改进的地方(当然的,你又不是pis神)。例如,涉及类添加时,类名的字符串并接保证原有类名不覆盖。例如,可以应对一下结构变换的适应能力。例如(好多问题啊)。。。

至于还有什么毛病,请各位大侠指导了(这人脸皮厚,尽管喷)。

按道理要上传demo的?点此实例下载

Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
详解javascript replace高级用法
Feb 17 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 #Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 #Javascript
用jQuery中的ajax分页实现代码
Sep 20 #Javascript
jquery模拟按下回车实现代码
Sep 20 #Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 #Javascript
50个比较实用jQuery代码段
Sep 18 #Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 #Javascript
You might like
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
javascript常用的方法整理
2015/08/20 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python格式化字符串实例总结
2014/09/28 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python的时间模块datetime详解
2017/04/17 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python实现简易动态时钟
2018/11/19 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python中包的用法及安装
2020/02/11 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
传播学毕业生求职信
2013/10/11 职场文书
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
大学生毕业自我鉴定
2013/11/06 职场文书
秋冬农业生产标语
2014/10/09 职场文书
合作合同协议书范本
2015/01/27 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL