tab切换js代码 一个页面可多处使用

最近在给一个客户做一个zblog模板的时候需要用到一个页面中多处使用tab切换特效，做完后把代码整理了下，如果你也正好有此需求，直接复制代码即可。

tab切换js代码 一个页面可多处使用--js代码部分：

<script>
var fgm = {
 $: function(id) {
  return typeof id === "object" ? id : document.getElementById(id);
 },
 $$: function(tagName, oParent) {
  return (oParent || document).getElementsByTagName(tagName);
 },
 $$$: function(className, element, tagName) {
  var i = 0, aClass = [], reClass = new RegExp("(^|\\s)" + className + "(\\s|$)"), aElement = fgm.$$(tagName || "*", element || document);
  for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]);
  return aClass;
 },
 index: function(element) {
  var aChildren = element.parentNode.children, i;
  for(i = 0; i < aChildren.length; i++) if(aChildren[i] === element) return i;
  return -1;
 },
 on: function(element, type, handler) {
  return element.addEventListener ? element.addEventListener(type, handler, !1) : element.attachEvent("on" + type, handler); 
 },
 bind: function(object, handler) {
  return function() {
   return handler.apply(object, arguments);
  }; 
 }
};
function Tab(id) {
 var that = this;
 this.obj = fgm.$(id);
 this.oTab = fgm.$$$("tab", this.obj)[0];
 this.aTab = fgm.$$("li", this.oTab);
 this.oSwitch = fgm.$$$("switchBtn", this.oTab)[0];
 this.oPrev = fgm.$$("a", this.oSwitch)[0];
 this.oNext = fgm.$$("a", this.oSwitch)[1];
 this.aItems = fgm.$$$("items", this.obj);
 this.iNow = 0;  
 fgm.on(this.oSwitch, "click", fgm.bind(this, this.fnClick));
 fgm.on(this.oTab, "click", fgm.bind(this, this.fnMouseOver));
}
Tab.prototype = {
 fnMouseOver: function(ev) {
  var oEv = ev || event,
  oTarget = oEv.target || oEv.srcElement;
  oTarget.tagName.toUpperCase() === "LI" && (this.iNow = fgm.index(oTarget));
  this.fnSwitch();
 },
 fnClick: function(ev) {
  var oEv = ev || event,
  oTarget = oEv.target || oEv.srcElement,
  i;
  switch(fgm.index(oTarget)) {
   case 0:
    if(oTarget.className == "prev") {
     this.aTab[this.iNow].style.display = "block";
     this.iNow--; 
    };
    break;
   case 1:
    if(oTarget.className == "next") {     
     for(i = 0; i < this.iNow; i++) this.aTab[i].style.display = "none";
     this.iNow++; 
    };
    break;
  };
  this.aTab[this.iNow].style.display = "block";  
  this.fnSwitch(); 
 },
 fnSwitch: function() {
  for(var i = 0; i < this.aTab.length; i++) (this.aTab[i].className = "", this.aItems[i].style.display = "none"); 
  this.aTab[this.iNow].className = "current";
  this.aItems[this.iNow].style.display = "block";
  this.oPrev.className = this.iNow == 0 ? "prevNot" : "prev";
  this.oNext.className = this.iNow == this.aTab.length - 1 ? "nextNot" : "next";
 }
};
//应用
fgm.on(window, "load", function() {
 var aItem = fgm.$$$("item"),
 i = 0;
 for(; i < aItem.length; i++) new Tab(aItem[i]);
});
</script>

注意，此js代码需要放在页面的</head>之前。

tab切换js代码 一个页面可多处使用--html代码部分：

<div class="item">
            <div class="tab">
                <ul>
                    <li class="current">标题一</li>
                    <li>标题二</li>
                    <li>标题三</li>
                </ul>
                <span class="switchBtn"><a href="#" class="prevNot"></a><a href="#" class="next"></a></span>
            </div>
            <ul class="items" style="display:block;">
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>   
            </ul>
<ul class="items">
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>          

</ul>
            <ul class="items">
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>
                <li><a href="#">列表标题</a></li>   
            </ul>

        </div>

此html代码可以在页面多处位置使用不会冲突，可以给"<ul>"或者"<div>"添加id属性，以实现不同位置不同显示效果。css代码就不上，可以根据自己的具体需求慢慢调整的，希望对大家有用。