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 eval函数深入认识
Feb 21 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
JavaScript文档对象模型DOM
Nov 20 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
15种PHP Encoder的比较
2007/04/17 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python字符串判断密码强弱
2020/03/18 Python
python接口自动化框架实战
2020/12/23 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
幼儿园教师教学反思
2014/02/06 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
读书之星事迹材料
2014/05/12 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
六查六看六改心得体会
2014/10/14 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
话题作文之自信作文
2019/11/15 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle