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 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
jquery实现图片轮播器
May 23 jQuery
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
JavaScript中MutationObServer监听DOM元素详情
Nov 27 Javascript
vue3不同环境下实现配置代理
May 25 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实现文件上传二法
2006/10/09 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
解除租赁合同协议书
2016/03/21 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
详解Vue router路由
2021/11/20 Vue.js
我的收音机情缘
2022/04/05 无线电
Python内置的数据类型及使用方法
2022/04/13 Python