跨浏览器通用、可重用的选项卡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 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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生成随机密码的三种方法小结
2010/09/04 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
Python的两道面试题
2013/06/29 面试题
Java基础面试题
2014/07/19 面试题
行政管理人员精品工作推荐信
2013/11/04 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
会计专业应届生求职信
2013/11/24 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
上班迟到检讨书
2014/09/15 职场文书
工作检讨书范文
2015/01/23 职场文书
MySQL分库分表详情
2021/09/25 MySQL