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读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JS中判断null的方法分析
Nov 21 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
详解webpack打包vue时提取css
May 26 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
如何开发一个渐进式Web应用程序PWA
May 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
Cannot modify header information错误解决方法
2008/10/08 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
python和ruby,我选谁?
2017/09/13 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
思想政治自我鉴定
2013/10/06 职场文书
致全体运动员广播稿
2014/02/01 职场文书
2014年统战工作总结
2014/12/09 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
结婚主持人致辞
2015/07/28 职场文书
田径运动会广播稿
2015/08/19 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
python基础入门之字典和集合
2021/06/13 Python
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
python画条形图的具体代码
2022/04/20 Python