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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
javascript模块化简单解析
Apr 07 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
JavaScript实现移动端弹窗后禁止滚动
May 25 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检查字符串中是否有外链的方法
2015/07/29 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
原生js实现无缝轮播图效果
2021/01/28 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python使用django搭建web开发环境
2017/06/09 Python
python3判断url链接是否为404的方法
2018/08/10 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
岗位明星事迹材料
2014/05/18 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
教师学期个人总结
2015/02/11 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
Python+tkinter实现高清图片保存
2022/03/13 Python
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android