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 date格式化示例
Sep 25 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
微信开发 微信授权详解
Oct 21 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
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
PHP4中实现动态代理
2006/10/09 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP数组实例详解
2016/06/26 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python操作redis方法总结
2018/06/06 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
C#中的验证控件有几种
2014/03/08 面试题
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
法人委托书范本
2014/04/04 职场文书
团结演讲稿范文
2014/05/23 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
指导教师推荐意见
2015/06/05 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书