跨浏览器通用、可重用的选项卡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 Code实现IE邮件转发新浪微博
Jul 03 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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部分常见问题总结
2008/03/27 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
yii分页组件用法实例分析
2015/12/28 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
28个JS验证函数收集
2010/03/02 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
微信小程序云开发之使用云函数
2019/05/17 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python数据操作方法封装类实例
2017/06/23 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
django Admin文档生成器使用详解
2019/07/22 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
年会搞笑主持词串词
2014/03/24 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python