Javascript 自适应高度的Tab选项卡


Posted in Javascript onApril 05, 2011

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;
Javascript 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
AngularJS内置指令
Feb 04 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
jQuery手风琴的简单制作
May 12 jQuery
node前端开发模板引擎Jade的入门
May 11 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
Ajax 数据请求的简单分析
Apr 05 #Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 #Javascript
jQuery的运行机制和设计理念分析
Apr 05 #Javascript
jQuery JSON的解析方式分享
Apr 05 #Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 #Javascript
基于jquery的动态创建表格的插件
Apr 05 #Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 #Javascript
You might like
PHP下对字符串的递增运算代码
2010/08/21 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
js 弹出菜单/窗口效果
2011/10/30 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
python图片验证码生成代码
2016/07/02 Python
python如何求解两数的最大公约数
2018/09/27 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python中自带的三个装饰器的实现
2019/11/08 Python
tensorflow之并行读入数据详解
2020/02/05 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
python如何使用代码运行助手
2020/07/03 Python
python爬取抖音视频的实例分析
2021/01/19 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
巴西购物网站:Estrela10
2018/12/13 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
暑期实践思想汇报
2014/01/06 职场文书
幼儿园秋游感想
2014/03/12 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Django Paginator分页器的使用示例
2021/06/23 Python
Java实现多线程聊天室
2021/06/26 Java/Android