Jquery中文网 www.jquerycn.cn
jQuery 教程 | jQuery ui教程 |
Jquery中文网 >  脚本编程  >  javascript  >  正文 可重用的选项卡切换javascript代码

可重用的选项卡切换javascript代码

发布时间：2017-01-16   编辑：www.jquerycn.cn
jquery中文网为您提供可重用的选项卡切换javascript代码等资源，欢迎您收藏本站，我们将为您提供最新的可重用的选项卡切换javascript代码资源
下面我找到一个可以在同一页面多次调用的tab选项卡切换代码，有需要的朋友可以参考一下①跨浏览器，IE6 ，FF，Chrome，Safari，Opera 　②同一个页面可以用同一个js设置不同的选项卡
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >可重用的选项卡切换javascript代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选项卡</title> <style type="text/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; } </style> </head> <body>
<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>
<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>
<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>
<script type="text/javascript"> /** * 事件处理通用函数 */ var EventUtil = { getEvent : function(event){ return event ? event : window.event; }, 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
提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery自动切换tabs选项卡的实现代码
可重用的选项卡切换javascript代码
jquery自动切换tabs选项卡的具体实现
实用的Jquery选项卡TAB示例代码
jQuery自动切换/点击切换选项卡效果代码
纯CSS实现Tab页切换效果
javascript自动切换选项卡效果
javascript简单实用的选项卡实例代码
纯 CSS 选项卡的实现例子
原生javascript选项卡菜单代码

上一篇：js select操作参考 下一篇：兼容IE，FF弹出遮盖拖动层
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
CopyRight © 2010-2014 jQeury中文网 jquerycn.cn , All Rights Reserved.