Home > Web Front-end > JS Tutorial > Javascript adaptive height Tab_javascript skills

Javascript adaptive height Tab_javascript skills

WBOY
Release: 2016-05-16 18:08:35
Original
1232 people have browsed it

The specific code for the JS part is as follows:

Copy code The code is as follows:

var getSiblingNode=function( className,elAr,el,not){
className=" " className " ";
var Arr=[];
for(var i=0,l=elAr.length;iif(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//There is a closure here to obtain similar elements of the selected element;
(function(i){
var thisSibling=getSiblingNode("n",divEl,divEl[i],true);
liEl[i].onclick=function(){
divEl[ i].style.display="block";
//Set the status of the selected dom element;
this.className="hasClick";
var divElSibling=getSiblingNode(null,liEl,liEl[i ],false);
//Set the css of other unselected dom elements;
for(var a=0,b=thisSibling.length;athisSibling[a ].style.display="none";
}
for(var x=0,y=divElSibling.length;xdivElSibling[x].className="havtClick" ;
}
}
})(i)
}
}
var slide=function(){
runFn("content","disDiv");
}
window.onload=slide;
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template