快捷導(dǎo)航

Javascript 自適應(yīng)高度的Tab選項(xiàng)卡

更新時(shí)間：2011年04月05日 21:44:21 作者：

選項(xiàng)卡的原理其實(shí)比較簡單，就是設(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; 

您可能感興趣的文章:

相關(guān)文章

JavaScript生成驗(yàn)證碼并實(shí)現(xiàn)驗(yàn)證功能
這篇文章主要介紹了JavaScript生成驗(yàn)證碼并實(shí)現(xiàn)驗(yàn)證功能的相關(guān)資料,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
uniapp插件uview下表單無法動(dòng)態(tài)校驗(yàn)的問題解決
最近項(xiàng)目中用到了uview?在做表單時(shí)用到了校驗(yàn),發(fā)現(xiàn)校驗(yàn)不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動(dòng)態(tài)校驗(yàn)的問題解決,需要的朋友可以參考下
2022-12-12
用javascript關(guān)閉本窗口不彈出詢問框的方法
ie中用close關(guān)閉非open打開的窗口時(shí)回彈出一個(gè)對(duì)話框詢問用戶，怎么去掉這個(gè)框呢，在window.close之前加上window.top.opener = null就可以了
2014-09-09
JavaScript中使用ActiveXObject操作本地文件夾的方法
以前一直用vbscript來操作文件夾，才發(fā)現(xiàn)原來使用JavaScript也是可以的，肯定不如vbs用的簡單，不過學(xué)習(xí)一下還是不錯(cuò)的
2014-03-03
JavaScript實(shí)現(xiàn)數(shù)組分塊的四種方法
在前端開發(fā)的日常工作中,處理數(shù)組是家常便飯,尤其是在面對(duì)海量數(shù)據(jù)渲染、性能優(yōu)化等場景時(shí),將大數(shù)組按照指定大小進(jìn)行分塊處理,成了一個(gè)非常實(shí)用的技能,今天咱們就來聊聊,如何用JavaScript實(shí)現(xiàn)數(shù)組分塊,需要的朋友可以參考下
2025-04-04
js獲取當(dāng)前地址 JS獲取當(dāng)前URL的示例代碼
本篇文章主要是對(duì)js獲取當(dāng)前地址 JS獲取當(dāng)前URL的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
JavaScript中這6個(gè)新特性你都了解了嗎
作為一門不斷演進(jìn)的語言,JavaScript每年都會(huì)引入新特性,這篇文章主要為大家整理了一些個(gè)人認(rèn)為特別有用的新JavaScript特性,以及一些補(bǔ)充的實(shí)例代碼,希望對(duì)大家有所幫助
2024-01-01
JavaScript中對(duì)于SPA單頁面的理解
這篇文章主要介紹了JavaScript中對(duì)于SPA單頁面的理解，單頁應(yīng)用SPA是一種網(wǎng)絡(luò)應(yīng)用程序或網(wǎng)站的模型，它通過動(dòng)態(tài)重寫當(dāng)前頁面來與用戶交互
2023-02-02
lightBox 簡易的全屏透明遮罩解決方法
現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了，絕大多數(shù)遮罩是通過計(jì)算頁面大小，然后覆蓋一個(gè)與頁面同等大小的層實(shí)現(xiàn)，如騰訊qzone, wordpress后臺(tái)。
2010-06-06
jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
大家在做Web項(xiàng)目，都會(huì)有注冊登錄模塊，如果是郵箱注冊，想要在輸入@后觸發(fā)下拉框顯示各個(gè)郵箱的功能。下面介紹一款jQuery實(shí)現(xiàn)輸入郵箱的時(shí)候，可自動(dòng)補(bǔ)全郵箱地址，也可稱為是“輸入提示”的功能，比如輸入aaa時(shí)，自動(dòng)變成aaa@163.com，有效提升網(wǎng)頁的人性化體驗(yàn)
2015-10-10