跨浏览器通用、可重用的选项卡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返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Python高效编程技巧
2013/01/07 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python中bisect的使用方法
2019/12/31 Python
基于python实现文件加密功能
2020/01/06 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
最新pycharm安装教程
2020/11/18 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
心理健康教育心得体会
2013/12/29 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
装修施工安全责任书
2014/07/24 职场文书