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实现网站超链接和图片提示效果
Mar 21 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
bootstrap模态框示例代码分享
May 17 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
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 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php单例模式示例分享
2015/02/12 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
vue引入axios同源跨域问题
2018/09/27 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python中 map()函数的用法详解
2018/07/10 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
采购员的工作职责
2013/12/26 职场文书
医院实习接收函
2014/01/12 职场文书
绿色小区申报材料
2014/08/22 职场文书
论群众路线学习笔记
2014/11/06 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电