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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
js实现分页功能
May 24 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
详解Vue单元测试case写法
May 24 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
override和overload的区别
2016/03/09 面试题
高一家长会邀请函
2014/01/12 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
产品开发计划书
2014/04/27 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
反邪教标语
2014/06/23 职场文书
大四学生个人总结
2015/02/15 职场文书
2015年班组长工作总结
2015/04/10 职场文书
学习十八大的感悟
2015/08/11 职场文书
社区服务活动感想
2015/08/11 职场文书