Javascript 自適應(yīng)高度的Tab選項(xiàng)卡
更新時(shí)間:2011年04月05日 21:44:21 作者:
選項(xiàng)卡的原理其實(shí)比較簡(jiǎn)單,就是設(shè)置2種狀態(tài),選中和未選中的2中不同CSS狀態(tài),因此也有直接不用JS之用css就能實(shí)現(xiàn)的效果
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++){
//這里有個(gè)閉包,用于獲取被選中元素的同類元素;
(function(i){
var thisSibling=getSiblingNode("n",divEl,divEl[i],true);
liEl[i].onclick=function(){
divEl[i].style.display="block";
//設(shè)置選中的dom元素的狀態(tài);
this.className="hasClick";
var divElSibling=getSiblingNode(null,liEl,liEl[i],false);
//設(shè)置其他未被選中的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;
復(fù)制代碼 代碼如下:
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++){
//這里有個(gè)閉包,用于獲取被選中元素的同類元素;
(function(i){
var thisSibling=getSiblingNode("n",divEl,divEl[i],true);
liEl[i].onclick=function(){
divEl[i].style.display="block";
//設(shè)置選中的dom元素的狀態(tài);
this.className="hasClick";
var divElSibling=getSiblingNode(null,liEl,liEl[i],false);
//設(shè)置其他未被選中的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;
您可能感興趣的文章:
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
- js實(shí)現(xiàn)tab選項(xiàng)卡函數(shù)代碼
- js tab 選項(xiàng)卡
- 跨瀏覽器通用、可重用的選項(xiàng)卡tab切換js代碼
- 純php打造的tab選項(xiàng)卡效果代碼(不用js)
- Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
- javascript+css 新聞顯示tab 選項(xiàng)卡效果
- javascript 通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)
- javascript 定時(shí)自動(dòng)切換的選項(xiàng)卡Tab
- js自定義Tab選項(xiàng)卡效果
相關(guān)文章
javascript實(shí)現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)用戶管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06微信小程序購(gòu)物商城系統(tǒng)開發(fā)系列-工具篇的介紹
這篇文章主要介紹了微信小程序購(gòu)物商城系統(tǒng)開發(fā)系列-工具篇的介紹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-11-11js正文內(nèi)容高亮效果的實(shí)現(xiàn)方法
這篇文章介紹了js正文內(nèi)容高亮效果的實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-06-06Javascript 制作圖形驗(yàn)證碼實(shí)例詳解
這篇文章主要介紹了Javascript 制作圖形驗(yàn)證碼實(shí)例詳解的相關(guān)資料,附有實(shí)例代碼及實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-12-12JavaScript中yield實(shí)用簡(jiǎn)潔實(shí)現(xiàn)方式
原以為是一個(gè)蠻復(fù)雜的題目,想了許久沒思路,當(dāng)然要實(shí)現(xiàn)絕對(duì)能實(shí)現(xiàn),但如果分析JavaScript腳本或是動(dòng)態(tài)產(chǎn)生代碼,都太復(fù)雜了。2010-06-06