Javascript adaptive height Tab _ javascript tips-js tutorial

The principle of the tab is actually relatively simple, that is, to set two States, different CSS states in the selected and unselected two, therefore, the JS Code is as follows:

The Code is as follows:

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 pEl = document. getElementById (parentId). getElementsByTagName ("p ");
For (var I = 0, l = liEl. length; I // A closure is provided to obtain similar elements of the selected element;
(Function (I ){
Var thisSibling = getSiblingNode ("n", pEl, pEl [I], true );
LiEl [I]. onclick = function (){
PEl [I]. style. display = "block ";
// Set the status of the selected dom element;
This. className = "hasClick ";
Var pElSibling = getSiblingNode (null, liEl, liEl [I], false );
// Set the css of other unselected dom elements;
For (var a = 0, B = thisSibling. length; ThisSibling [a]. style. display = "none ";
}
For (var x = 0, y = pElSibling. length; x PElSibling [x]. className = "havtClick ";
}
}
}) (I)
}
}
Var slide = function (){
RunFn ("content", "disDiv ");
}
Window. onload = slide;