html5打开浏览器选项卡,选项卡跨浏览器切换 JS

环境： ①跨浏览器，IE6+，FF，Chrome，Safari，Opera

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

一、html部分(其实这还没啥好看的，设置了三个，前两个是一样的，通过click事件触发，最后一个通过鼠标移动触发)

class="name">

项目一项目二项目三

class="content">

类为 "tab1"项目一内容,通过 "click"触发类为 "tab1"项目二内容,通过 "click"触发类为 "tab1"项目三内容,通过 "click"触发

class="name">

项目一项目二项目三

class="content">

类为 "tab1"项目一内容,通过 "click"触发类为 "tab1"项目二内容,通过 "click"触发类为 "tab1"项目三内容,通过 "click"触发

class="name">

项目一项目二项目三

class="content">

类为 "tab2"项目一内容,通过 "mouseover"触发类为 "tab2"项目二内容,通过 "mouseover"触发类为 "tab2""项目三内容,通过 "mouseover"触发

特别声明，由于我是菜鸟，所以，我写的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代码

varEventUtil={//跨浏览器取事件对象eventgetEvent :function(event){returnevent?event : window.event;

},//款浏览器取事件对象的目标DOM节点getTarget :function(event){returnevent.target||event.srcElement;

},//跨浏览器对节点进行事件绑定addHandler :function(element,type,handler){if(element.addEventListener){

element.addEventListener(type,handler,false);

}elseif(element.attachEvent){

element.attachEvent("on"+type,handler);

}else{

element["on"+type]=handler;

}

}

};//设置选项卡切换方式tabSwitch("tab1","click");

tabSwitch("tab2","mouseover");//传入参数inClassName设定为绑定的选项卡类名，参数triggerType设定为触发切换的类型functiontabSwitch(inClassName,triggerType){//取得全部选项卡区域if(document.querySelectorAll){vartabs=document.querySelectorAll("."+inClassName);

}else{vardivs=document.getElementsByTagName_r("div");vartabs=newArray();for(vark=0,lenDiv=divs.length; k-1){

tabs.push(divs[k]);

}

}

}//为每个选项卡建立切换功能for(varj=0,len=tabs.length; j

content.getElementsByTagName_r("li")[0].style.display="block";//添加事件委托EventUtil.addHandler(nameUl,triggerType,function(event){//获取事件对象event=EventUtil.getEvent(event);vartarget=EventUtil.getTarget(event);//选项卡切换if(target.nodeName.toLowerCase()=="li"){//分别取得标题列表项和内容列表项varnameList=nameUl.getElementsByTagName_r("li");varcontentList=content.getElementsByTagName_r("li");//标题添加selected类，并显示内容for(vari=0,len=nameList.length; 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神)。例如，涉及类添加时，类名的字符串并接保证原有类名不覆盖。例如，可以应对一下结构变换的适应能力。例如(好多问题啊)。。。