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;

相关文章

  • js简单实现交换Li的值

    js简单实现交换Li的值

    这篇文章主要介绍的是通过js简单实现交换Li的值,需要的朋友可以参考下
    2014-05-05
  • JavaScript 继承详解 第一篇

    JavaScript 继承详解 第一篇

    几乎每个开发人员都有面向对象语言(比如C++、C#、Java)的开发经验。 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例。
    2009-08-08
  • javascript实现用户管理系统

    javascript实现用户管理系统

    这篇文章主要为大家详细介绍了javascript实现用户管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 微信小程序购物商城系统开发系列-工具篇的介绍

    微信小程序购物商城系统开发系列-工具篇的介绍

    这篇文章主要介绍了微信小程序购物商城系统开发系列-工具篇的介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • jQuery拖拽 & 弹出层 介绍与示例

    jQuery拖拽 & 弹出层 介绍与示例

    这篇文章主要介绍了jQuery拖拽 & 弹出层,有需要的朋友可以参考一下
    2013-12-12
  • trim原型函数看js正则表达式的性能

    trim原型函数看js正则表达式的性能

    如果你看到别人写trim函数是用循环而不用正则表达式来写,请不要取笑,也许,他们就是高手。如果你很自信你的trim函数效率很高,请看完本文再下结论。
    2008-12-12
  • javascript中indexOf技术详解

    javascript中indexOf技术详解

    indexOf()函数用于查找子字符串在当前字符串中第一次出现的位置。该函数属于String对象,所有主流浏览器均支持该函数。下面我们就来详细探讨下javascript的index0f()函数
    2015-05-05
  • js正文内容高亮效果的实现方法

    js正文内容高亮效果的实现方法

    这篇文章介绍了js正文内容高亮效果的实现方法,有需要的朋友可以参考一下
    2013-06-06
  • Javascript 制作图形验证码实例详解

    Javascript 制作图形验证码实例详解

    这篇文章主要介绍了Javascript 制作图形验证码实例详解的相关资料,附有实例代码及实现效果图,需要的朋友可以参考下
    2016-12-12
  • JavaScript中yield实用简洁实现方式

    JavaScript中yield实用简洁实现方式

    原以为是一个蛮复杂的题目,想了许久没思路,当然要实现绝对能实现,但如果分析JavaScript脚本或是动态产生代码,都太复杂了。
    2010-06-06

最新评论