Javascript 自适应高度的Tab选项卡_javascript技巧

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;

时间: 2024-08-01 22:09:28

Javascript 自适应高度的Tab选项卡_javascript技巧的相关文章

浅谈bootstrap源码分析之tab(选项卡)_javascript技巧

实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1.Hiden.bs.tab:隐藏上一个元素 1.2.Show.bs.tab:显示当前元素 1.3.Hideen.bs.tab:隐藏上一个元素完成 1.4.

js 多层叠的TAB选项卡_javascript技巧

一个多层叠的TAB选项卡,自适应宽度(自行更改nonstop的width测试效果). HTML:多个导航tag加一个放置默认内容div 脚本:以数组的形式给出每个导航对应的html ABCDEFG HI JMLNO PSTUYZ! 这里放一些默认内容 1 1 1 1 1 1 1 1

学习javascript面向对象 实例讲解面向对象选项卡_javascript技巧

本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下 效果图: 1.功能说明 点击三个按钮分别显示对应的选项卡 2.html代码说明 <div class="box" id="box"> <ul class="list"> <li class="in_active">第一张选项卡</li> <li class="in">

js tab 选项卡_javascript技巧

一般需要事先写好css样式等function tab(sId) { var tabs = document.getElementsByTagName("H2"); var boxs = document.getElementsByTagName("h3"); if ( boxs[sId].style.display=="block"){ boxs[sId].style.display="none"; tabs[sId].sty

脚本控制自适应高度的缩短问题_javascript技巧

内容left 内容left 内容left 内容left 内容left 内容left 内容left 内容left 内容left 内容left 内容left 55×65 60×80 90×90 110×73 118×53 146×53 170×65 其它 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容1 内容2 内容2 内容2 内容2 内容2 内容2 内容2

javascript 通用滑动门tab类_javascript技巧

滑动门封装类 效果预览 滑动门 滑动门 滑动门 滑动门 滑动门 第一层内容 第二层内容 第三层内容 第四层内容 第五层内容 滑动门 滑动门 滑动门 滑动门 滑动门 第一层内容 第二层内容 第三层内容 第四层内容 第五层内容 滑动门 滑动门 滑动门 滑动门 滑动门 第一层内容 第二层内容 第三层内容 第四层内容 第五层内容

JavaScript实现简单的tab选项卡切换_javascript技巧

本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table切换</title> <style type="text/css"> *{ paddi

关于div自适应高度/左右高度自适应一致的js代码_javascript技巧

在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题. 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致. 左右自适应高度一致 Jquery 复制代码 代码如下: <div style="width:300px;"> <div id="Left" style="float:left;background-color:blue;">1<br/>3<br/&g

JavaScript代码里的判断小结_javascript技巧

比较判断 比较判断是比较两个值,返回一个布尔值,表示是否满足比较条件.JavaScript一共提供了8个比较运算符,这里主要说一下严格相等运算符和相等运算符的区别 严格相等运算符=== 判断 返回 两个值类型不同 false 两个值都是null/undefined/true/false true 两个值其中之一为NaN false 两个值都为数值且值相等 true 两个值都为字符串,且值相等 true 两个值都指向同一个引用类型 true 1 === "1" // false true