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 相关文章推荐
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
iview实现图片上传功能
Jun 29 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
深入php处理整数函数的详解
2013/06/09 PHP
php导入模块文件分享
2015/03/17 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
投资合作意向书范本
2015/05/08 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
旅游安全责任协议书
2016/03/22 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android