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 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
vue中三级导航的菜单权限控制
Mar 31 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php mssql 时间格式问题
2009/01/13 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
详解YII关联查询
2016/01/10 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP7内核之Reference详解
2019/03/14 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python处理二进制数据的方法
2015/06/03 Python
Python判断Abundant Number的方法
2015/06/15 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python去除字符串中的换行符
2017/10/11 Python
详解python中的装饰器
2018/07/10 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
分厂厂长岗位职责
2013/12/29 职场文书
科学发展观演讲稿
2014/09/11 职场文书
终止合同协议书范本
2016/03/22 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python