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的朋友一点学习经验小结
Nov 23 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
AngularJS快速入门
Apr 02 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
vue中的使用token的方法示例
Mar 10 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作的文本留言本的例子(四)
2006/10/09 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python中实现延时回调普通函数示例代码
2017/09/08 Python
用pycharm开发django项目示例代码
2018/10/24 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
C#笔试题
2015/07/14 面试题
中专生的个人自我评价
2013/12/11 职场文书
初中美术教学反思
2014/01/29 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
毕业设计说明书
2014/05/07 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
护士个人年度总结范文
2015/02/13 职场文书
员工安全责任协议书
2016/03/22 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js