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