Javascript 自適應高度的Tab選項卡

來源:互聯網
上載者:User

JS部分具體的代碼如下:
複製代碼 代碼如下:
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++){
//這裡有個閉包,用於擷取被選中元素的同類元素;
(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<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;

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.