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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
vue实现全选和反选功能
Aug 31 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
异步加载script的代码
2011/01/12 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
python如何查看安装了的模块
2020/06/23 Python
Python hashlib模块的使用示例
2020/10/09 Python
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
自考生自我评价分享
2014/01/18 职场文书
鲜花方阵解说词
2014/02/13 职场文书
大学生工作自荐书
2014/06/16 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python