Javascript 自适应高度的Tab选项卡

 更新时间:2011年04月05日 21:44:21   作者:  
选项卡的原理其实比较简单,就是设置2种状态,选中和未选中的2中不同CSS状态,因此也有直接不用JS之用css就能实现的效果
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生成验证码并实现验证功能

    这篇文章主要介绍了JavaScript生成验证码并实现验证功能的相关资料,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • uniapp插件uview下表单无法动态校验的问题解决

    uniapp插件uview下表单无法动态校验的问题解决

    最近项目中用到了uview 在做表单时用到了校验,发现校验不友好的结果,下面这篇文章主要给大家介绍了关于uniapp插件uview下表单无法动态校验的问题解决,需要的朋友可以参考下
    2022-12-12
  • 用javascript关闭本窗口不弹出询问框的方法

    用javascript关闭本窗口不弹出询问框的方法

    ie中用close关闭非open打开的窗口时回弹出一个对话框询问用户,怎么去掉这个框呢,在window.close之前加上window.top.opener = null就可以了
    2014-09-09
  • JavaScript中使用ActiveXObject操作本地文件夹的方法

    JavaScript中使用ActiveXObject操作本地文件夹的方法

    以前一直用vbscript来操作文件夹,才发现原来使用JavaScript也是可以的,肯定不如vbs用的简单,不过学习一下还是不错的
    2014-03-03
  • JavaScript实现数组分块的四种方法

    JavaScript实现数组分块的四种方法

    在前端开发的日常工作中,处理数组是家常便饭,尤其是在面对海量数据渲染、性能优化等场景时,将大数组按照指定大小进行分块处理,成了一个非常实用的技能,今天咱们就来聊聊,如何用JavaScript实现数组分块,需要的朋友可以参考下
    2025-04-04
  • js获取当前地址 JS获取当前URL的示例代码

    js获取当前地址 JS获取当前URL的示例代码

    本篇文章主要是对js获取当前地址 JS获取当前URL的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JavaScript中这6个新特性你都了解了吗

    JavaScript中这6个新特性你都了解了吗

    作为一门不断演进的语言,JavaScript每年都会引入新特性,这篇文章主要为大家整理了一些个人认为特别有用的新JavaScript特性,以及一些补充的实例代码,希望对大家有所帮助
    2024-01-01
  • JavaScript中对于SPA单页面的理解

    JavaScript中对于SPA单页面的理解

    这篇文章主要介绍了JavaScript中对于SPA单页面的理解,单页应用SPA是一种网络应用程序或网站的模型,它通过动态重写当前页面来与用户交互
    2023-02-02
  • lightBox 简易的全屏透明遮罩解决方法

    lightBox 简易的全屏透明遮罩解决方法

    现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qzone, wordpress后台。
    2010-06-06
  • jquery 实现输入邮箱时自动补全下拉提示功能

    jquery 实现输入邮箱时自动补全下拉提示功能

    大家在做Web项目,都会有注册登录模块,如果是邮箱注册,想要在输入@后触发下拉框显示各个邮箱的功能。下面介绍一款jQuery实现输入邮箱的时候,可自动补全邮箱地址,也可称为是“输入提示”的功能,比如输入aaa时,自动变成aaa@163.com,有效提升网页的人性化体验
    2015-10-10

最新评论