自己写了一个tab选项卡的切换，感觉还不错，跟大家分享一下。
一、点击切换
页面效果：
html页面：
tab面板切换
js：
var ChangeNode=function(b_img_src,g_img_src,target,banner_t) { this.blue_img_src=b_img_src;//点亮的图片 this.gray_img_scr=g_img_src;//未点亮的灰色图片 this.img_li=target;//包含img标签的li容器 this.banner_tartet=banner_t;//banner面板 } /* @news:新的ChangeNode对象 @old：与news相对 * */ function changeImg(news,old) { if(old!=null) { old.img_li.querySelector("img").src=old.gray_img_scr; old.banner_tartet.className="banner"; } news.img_li.querySelector("img").src=news.blue_img_src; news.banner_tartet.className="banner on"; } (function(){ if(document.getElementById){ if(!document.getElementById("sel_ul")){ return false; } } var sel_ul=document.getElementById("sel_ul"), sel_li=sel_ul.querySelectorAll("li"), li_len=sel_li.length || sel_ul.childNodes.length,//获取子元素的长度 banner_list=document.querySelectorAll(".banner"); var changeImgFooPool=new Array(); changeImgFooPool[0]=new ChangeNode("img/shap_1_sel.png","img/shap_1.png",sel_li[0],banner_list[0]); changeImgFooPool[1]=new ChangeNode("img/shap_3_sel.png","img/shap_3.png",sel_li[1],banner_list[1]); changeImgFooPool[2]=new ChangeNode("img/shap_4_sel.png","img/shap_4.png",sel_li[2],banner_list[2]); var index=-1; for(var i=0;i 二、鼠标滑过切换
页面预览：
页面代码：
因为js没有像jQuery有addClass，removeClass之类的方法，我在网上看到用js实现这方面的方法，记录一下，方便以后使用。
function addClass(obj, cls) { if (!this.hasClass(obj, cls)) { obj.className += " " + cls; }}function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));}function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); }}