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自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
js 数组 fill() 填充方法
Nov 02 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
PHP中其实也可以用方法链
2011/11/10 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
利用python循环创建多个文件的方法
2018/10/25 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Python新手学习函数默认参数设置
2020/06/03 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
职业生涯规划书范文
2014/03/10 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
javaScript Array api梳理
2021/03/31 Javascript
浅谈Python数学建模之线性规划
2021/06/23 Python