[json]js 高度自适应tab选项卡代码

var getsiblingnode=function(classname,elar,el,not){
classname=" "+classname+" ";
var arr=[];
for(var i=0,l=elar.length;i if(elar[i]!=el&&(elar[i].nodetype===1)&&(" "+elar[i].classname+" ").indexof(classname)>-1&& not){
arr.push(elar[i]);
}
else if(elar[i]!=el&&elar[i].nodetype===1){
arr.push(elar[i]);
}
}
return arr;
}
var runfn=function(id,parentid){
var elid=id,parentid=parentid;
var contentel=document.getelementbyid(elid);
var liel=contentel.getelementsbytagname("ul")[0].getelementsbytagname("li");
var divel=document.getelementbyid(parentid).getelementsbytagname("div");
for(var i=0,l=liel.length;i //这里有个闭包，用于获取被选中元素的同类元素；
(function(i){
var thissibling=getsiblingnode("n",divel,divel[i],true);
liel[i].onclick=function(){
divel[i].style.display="block";
//设置选中的dom元素的状态；
this.classname="hasclick";
var divelsibling=getsiblingnode(null,liel,liel[i],false);
//设置其他未被选中的dom元素的css教程；
for(var a=0,b=thissibling.length;a thissibling[a].style.display="none";
}
for(var x=0,y=divelsibling.length;x divelsibling[x].classname="havtclick";
}
}
})(i)
}
}
var slide=function(){
runfn("content","disdiv");
}
window.onload=slide;

下面来个实例

 
 



一个多层叠的tab选项卡，自适应宽度(自行更改nonstop的width测试效果)。
html：多个导航tag加一个放置默认内容div
脚本：以数组的形式给出每个导航对应的html
   
    abcdefg
    hi jmlno
    pstuyz!
    
     这里放一些默认内容
     

1

1

1

1

1

1

1

1
    
   
   <script type="text/网页特效">
    //20个字母下的品牌，不包含默认显示的内容
    var conthtml = ["a1","b2","c3","d4","e5","f6","g7","h21","i22","j23","m24","l25","n26","o27","p11","s12","t13","u14","y15","z16"];
    var a2zbox = document.getelementbyid("a2zbox");
    var a2ztag = a2zbox.getelementsbytagname("span");
    var a2zcont = a2zbox.getelementsbytagname("div")[0];
    var divs = [],coln=math.floor(a2zcont.clientwidth/(a2ztag[0].clientwidth))//7;
    for(var n=1; n      divs[n-1] = document.createelement("div");
     divs[n-1].style.display = "none";
     a2zbox.insertbefore(divs[n-1],a2ztag[coln*n]);
    }
    divs.push(a2zcont);
    var hotbox = divs.length-1;//初始内容div id
    var hotboxh = a2zcont.clientheight; //内容div高度
    var hotboxhtemp = hotboxh;
    var time = 50, space = 100;//滑动速度
    conthtml.push(a2zcont.innerhtml);
    function tabs(t){
     for( i=0; i       //a2ztag[i].removeattribute("class");
      a2ztag[i].classname="";
     a2ztag[t].classname = "hot";
     var n=math.ceil((t+1)/coln-1);
     divs[n].style.csstext = "display:block;border-color:red";
     divs[n].innerhtml = conthtml[t];
     if(n!=hotbox){
      divs[n].style.height = 0;
      divs[hotbox].style.border = 0 ;
      var wane = setinterval(function(){
       hotboxh -= space;
       divs[hotbox].style.height = hotboxh + "px";
       divs[n].style.height = (hotboxhtemp - hotboxh ) + "px";
       if(divs[hotbox].clientheight < 1){
        clearinterval(wane);
        divs[hotbox].style.csstext = "display:none";
        hotbox=n;
        hotboxh = hotboxhtemp;
       }
      },time);
     }
    }
    function.prototype.bind = function(){var __m = this; var arg = arguments; return function(){ __m.apply(window,arg); } }  
    for( i=0; i    </script>

[json]js 高度自适应tab选项卡代码

http://m.bbyears.com/shujuku/29743.html

推荐访问:json格式化 json在线格式化 js格式化 js刷新当前页面 jsp js保留两位小数