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 全局AJAX事件使用代码
Nov 05 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
javascript代码实现简易计算器
Jan 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实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php解析xml方法实例详解
2015/05/12 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
javascript中this的四种用法
2015/05/11 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python threading的使用方法解析
2019/08/28 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
交通安全教育制度
2014/02/02 职场文书
项目合作协议书
2014/04/16 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书