你的位置:首页 > Java教程

[Java教程]标签页的切换方式解析


标签页的切换方式

1、控制tab的显示与隐藏

2、tab不切换,数据加载

 

控制tab的显示与隐藏

前端脚本:

1、jquery实现:

$(function(){	$(".sdkj-tabs li").click(function() {	$(this).addClass("on").siblings().removeClass("on");	var index=$(".sdkj-tabs li").index(this);	$(".cont-tabs>div").eq(index).show().siblings().hide();	});});

引入jquery文件,代码简洁

jquery文件较大,浏览器不兼容

 

2、js 实现

function selectTab(showContent,selfObj){   var tab = document.getElementById("sdkj-tabs").getElementsByTagName("li");   var tablength = tab.length;   for(i=0; i<tablength; i++){     tab[i].className = "";   }   selfObj.className = "on";   // 标签页切换   for(i=0; j=document.getElementById("cont-tab"+i); i++){     j.style.display = "none";   }   document.getElementById(showContent).style.display = "block";}

无需引入jquery文件
代码量大,需每个标签添加函数及ID

3、插件实现

var tabs=function(){  function tag(name,elem){    return (elem||document).getElementsByTagName(name);  }  //获得相应ID的元素  function id(name){    return document.getElementById(name);  }  function first(elem){    elem=elem.firstChild;    return elem&&elem.nodeType==1? elem:next(elem);  }  function next(elem){    elem=elem.nextSibling;     while(elem){      if(elem.nodeType==1){        return elem;      }      else{        elem=elem.nextSibling;      }           }     }  function child(elem){    var arrays = new Array();    var array_int=0;    var elem_child=first(elem);    for(array_int=0;elem_child;array_int++){      //console.log("elem:"+elem);            arrays[array_int]=elem_child;      elem_child=next(elem_child);    }      return arrays;  }  return {    set:function(elemId,tabId){      var elem=tag("li",id(elemId));      var tabs=child(id(tabId));      var listNum=elem.length;      var tabNum=tabs.length;      console.log(tabs);            for(var i=0;i<listNum;i++){          elem[i].onclick=(function(i){            return function(){              for(var j=0;j<3;j++){                if(i==j){                  tabs[j].style.display="block";                  elem[j].className="on";                }                else{                  tabs[j].style.display="none";                   elem[j].className=" ";                }              }            }          })(i)      }    }  }}();tabs.set("sdkj-tabs","cont-tabs");//执行

无需引入jquery文件,只需添加父元素ID

 

适用才是真理。