var getsiblingnode=function (Classname,elar,el,not) {
Classname= "" +classname+ "";
var arr=[];
for (Var i=0,l=elar.length;i<l;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<l;i++) {
Here is a closure that is used to get the same element of the selected element;
(function (i) {
var Thissibling=getsiblingnode ("n", divel,divel[i],true);
Liel[i].onclick=function () {
divel[i].style.display= "Block";
Sets the state of the selected DOM element;
This.classname= "Hasclick";
var divelsibling=getsiblingnode (Null,liel,liel[i],false);
A CSS tutorial that sets up other DOM elements that are not selected;
for (Var a=0,b=thissibling.length;a<b;a++) {
Thissibling[a].style.display= "None";
}
for (Var x=0,y=divelsibling.length;x<y;x++) {
Divelsibling[x].classname= "Havtclick";
}
}
}) (i)
}
}
var slide=function () {
RUNFN ("Content", "Disdiv");
}
Window.onload=slide;
Here's an example.
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Multi-tiered tab tab-web commune-artwc.com</title>
<style type= "Text/css" >
. nonstop {width:168px; Font-size:12px;margin:auto border:1px solid #cdcdcd; padding:2px; overflow:hidden;}
. nonstop span {float:left;_display:inline; cursor:pointer width:22px; height:14px; background: #cdcdcd URL (./img/ button.gif) no-repeat-175px top; font-size:10px; line-height:14px; margin:2px 0 0 2px; Display:inline; Text-align:center; }
. nonstop Span:hover {background:gray; Font-weight:bold}
. nonstop div {height:300px; Clear:both border:1px solid #cdcdcd; border-width:2px 1px; margin-left:2px ; }
. Nonstop div a {float:left; width:80px; height:40px; background:white; text-align:center; line-height:40px; padding-top : 8px; margin:1px 0 0 1px; }
. Nonstop Div a img {border:0}
. nonstop Span.hot {border:1px solid red; width:20px; color:white; height:15px; background:red url (./img/button.gif) No-r epeat-175px-14px; Font-weight:bold; Border-bottom:none; }
</style>
<body>
<!--top--> A Multiple cascading tab tab, Adaptive width (change the width test effect of nonstop). <br>html: Multiple navigation tag plus a place default content div<br> script: give each navigation corresponding HTML in array form
<div class= "Nonstop" id= "A2zbox" ><!--content area-->
<span>a</span><span>b</span><span>c</span><span>d</span>< Span>e</span><span>f</span><span>g</span>
<span>h</span><span>i</span> <span>j</span><span>m</span>< Span>l</span><span>n</span><span>o</span>
<span>p</span><span>s</span><span>t</span><span>u</span>< Span>y</span><span>z</span><span>!</span>
<div><!--Default Content-->
Put some default content here
<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1
</div>
</div>
<script type= "text/web Effects" >
20-letter brand, does not contain default display content
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<a2ztag.length/coln; 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;//initial content div ID
var hotboxh = a2zcont.clientheight; Content div Height
var hotboxhtemp = hotboxh;
var time = $, space = 100;//sliding speed
Conthtml.push (a2zcont.innerhtml);
function tabs (t) {
for (i=0; i<a2ztag.length; 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<a2ztag.length; i++) A2ztag[i].onclick = Tabs.bind (i);
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
