（转载）怎么写tab?

演示地址：http://www.adanghome.com/js_demo/3/

===========================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
<style type="text/css">
.mt30{margin-top:30px;}
.none{display:none;}
</style>
<script type="text/javascript">
getElementsByClassName = function(str,root,tag){
if(root){
root = typeof root == "string" ? document.getElementById(root) : root;
} else {
root = document.body;
}
tag = tag || "*";
var els = root.getElementsByTagName(tag),arr = [];
for(var i=0,n=els.length;i<n;i++){
for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
if(k[j] == str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
</script>
</head>

<body>
<h1>怎么写tab</h1>

<style type="text/css">
#t1_m1,#t1_m2,#t1_m3{padding:5px;border:dashed 1px #333;margin:0 5px;}
</style>
<p>=====================================================</p>
<h2>版本一</h2>
<div id="demo1">
<div>
<span id="t1_m1">menu1</span>
<span id="t1_m2">menu2</span>
<span id="t1_m3">menu3</span>
</div>
<div id="t1_c1" class="mt30">11111</div>
</div>
<script type="text/javascript">
(function(){
var menu1 = document.getElementById("t1_m1"),
menu2 = document.getElementById("t1_m2"),
menu3 = document.getElementById("t1_m3"),
content = document.getElementById("t1_c1");
menu1.onclick = function(){
content.innerHTML = "11111";
}
menu2.onclick = function(){
content.innerHTML = "22222";
}
menu3.onclick = function(){
content.innerHTML = "33333";
}
})();
</script>

<style type="text/css">
#t2_m1,#t2_m2,#t2_m3{padding:5px;border:dashed 1px #333;margin:0 5px;}
#t2_c2,#t2_c3{display:none;}
</style>
<p>=====================================================</p>
<h2>版本二</h2>
<div id="demo2">
<div>
<span id="t2_m1">menu1</span>
<span id="t2_m2">menu2</span>
<span id="t2_m3">menu3</span>
</div>
<div class="mt30">
<div id="t2_c1">11111</div>
<div id="t2_c2">22222</div>
<div id="t2_c3">33333</div>
</div>
</div>
<script type="text/javascript">
(function(){
var menu1 = document.getElementById("t2_m1"),
menu2 = document.getElementById("t2_m2"),
menu3 = document.getElementById("t2_m3"),
content1 = document.getElementById("t2_c1"),
content2 = document.getElementById("t2_c2"),
content3 = document.getElementById("t2_c3");
menu1.onclick = function(){
content1.style.display = "block";
content2.style.display = "none";
content3.style.display = "none";
}
menu2.onclick = function(){
content1.style.display = "none";
content2.style.display = "block";
content3.style.display = "none";
}
menu3.onclick = function(){
content1.style.display = "none";
content2.style.display = "none";
content3.style.display = "block";
}
})();
</script>

<style type="text/css">
#tab_menu span{padding:5px;border:dashed 1px #333;margin:0 5px;}
</style>
<p>=====================================================</p>
<h2>版本三</h2>
<div id="demo3">
<div id="tab_menu">
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
<div id="tab_content" class="mt30">
<div>11111</div>
<div class="none">22222</div>
<div class="none">33333</div>
<div class="none">44444</div>
</div>
</div>
<script type="text/javascript">
(function(){
var menus = document.getElementById("tab_menu").getElementsByTagName("span"),
contents = document.getElementById("tab_content").getElementsByTagName("div");
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n].onclick = function(){
showContent(n);
}
})(i);
}

<style type="text/css">
#demo4-1 ul{padding:0;margin:0}
.demo41_tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
</style>
<p>=====================================================</p>
<h2>版本四</h2>
<div id="demo4-1">
<ul>
<li class="demo41_tabMenu">menu1</li>
<li class="demo41_tabMenu">menu2</li>
<li class="demo41_tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="demo41_tabContent">11111<div>一一一一一一一</div></div>
<div class="demo41_tabContent none">22222<div>二二二</div></div>
<div class="demo41_tabContent none">33333</div>
</div>
</div>

<div id="demo4-2">
<p>
<input type="radio" name="sex" id="male" class="demo42_tabMenu" checked /> <label for="male">男</label>
<input type="radio" name="sex" id="female" class="demo42_tabMenu" /> <label for="female">女</label>
</p>
<div class="mt30">
<div class="demo42_tabContent">I'm a boy</div>
<div class="demo42_tabContent none">I'm a girl</div>
</div>
</div>
<script type="text/javascript">
(function(){
var menus = getElementsByClassName("demo41_tabMenu","demo4-1"),
contents = getElementsByClassName("demo41_tabContent","demo4-1"),
menus2 = getElementsByClassName("demo42_tabMenu","demo4-2"),
contents2 = getElementsByClassName("demo42_tabContent","demo4-2");
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n].onclick = function(){
showContent(n);
}
})(i);
}

function showContent(index){
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}

for(var i = 0,n=menus2.length;i<n;i++){
(function(n){
menus2[n].onclick = function(){
showContent2(n);
}
})(i);
}

<style type="text/css">
#demo5-1 ul,#demo5-2 ul{padding:0;margin:0}
#demo5-1 .tabMenu,#demo5-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
</style>
<p>=====================================================</p>
<h2>版本五</h2>
<div id="demo5-1">
<ul>
<li class="tabMenu">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>

<div id="demo5-2" class="mt30">
<ul>
<li class="tabMenu">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
<script type="text/javascript">
(function(){
function createTab(root){
var menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root);
for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n].onclick = function(){
showContent(n);
}
})(i);
}

function showContent(index){
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}
}

createTab("demo5-1");
createTab("demo5-2");
})();
</script>

<style type="text/css">
#demo6-1 ul,#demo6-2 ul{padding:0;margin:0}
#demo6-1 .tabMenu,#demo6-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo61-tabMenu-selected{background:blue;color:#fff;}
.demo62-tabMenu-selected{background:green;color:#fff;}
</style>
<p>=====================================================</p>
<h2>版本六</h2>
<div id="demo6-1">
<ul>
<li class="tabMenu demo61-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>

<div id="demo6-2" class="mt30">
<ul>
<li class="tabMenu demo62-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
<script type="text/javascript">
(function(){
function createTab(root,selectMenuClassname,eventType){
var menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root),
selectMenuClassname = selectMenuClassname || "",
eventType = eventType || "click";

for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n]["on"+eventType] = function(){
showContent(n);
if(selectMenuClassname){
focusMenu(n);
}
}
})(i);
}

function showContent(index){
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}

function focusMenu(index){
var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
menus[index].className += " " + selectMenuClassname;
}
}

createTab("demo6-1","demo61-tabMenu-selected");
createTab("demo6-2","demo62-tabMenu-selected","mouseover");
})();
</script>

<style type="text/css">
#demo7-1 ul,#demo7-2 ul{padding:0;margin:0}
#demo7-1 .tabMenu,#demo7-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo71-tabMenu-selected{background:blue;color:#fff;}
.demo72-tabMenu-selected{background:green;color:#fff;}
</style>
<p>=====================================================</p>
<h2>版本七</h2>
<div id="demo7-1">
<ul>
<li class="tabMenu demo71-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>

<div id="demo7-2" class="mt30">
<ul>
<li class="tabMenu demo72-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
<script type="text/javascript">
(function(){
function createTab(root,selectMenuClassname,eventType,autoPlay,stayTime,callback){
var menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root),
selectMenuClassname = selectMenuClassname || "",
eventType = eventType || "click",
autoPlay = autoPlay || false,
stayTime = stayTime || 5000,
currentIndex = 0;

for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n]["on"+eventType] = function(){
showItem(n);
}
})(i);
}

if(autoPlay){
setInterval(function(){
itemsCount = menus.length;
currentIndex = currentIndex >= itemsCount - 1 ? 0 : currentIndex+1 ;
showItem(currentIndex);
},stayTime);
}

function showItem(index){
showContent(index);
if(selectMenuClassname){
focusMenu(index);
}
if(callback){
callback(index);
}
}

function showContent(index){
currentIndex = index;
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}

createTab("demo7-1","demo71-tabMenu-selected",null,true,8000);
createTab("demo7-2","demo72-tabMenu-selected","mouseover",null,null,function(index){alert("您激活了第"+(index+1)+"个tab项");});
})();
</script>

<style type="text/css">
#demo8-1 ul,#demo8-2 ul{padding:0;margin:0}
#demo8-1 .tabMenu,#demo8-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo81-tabMenu-selected{background:blue;color:#fff;}
.demo82-tabMenu-selected{background:green;color:#fff;}
</style>
<p>=====================================================</p>
<h2>版本八</h2>
<div id="demo8-1">
<ul>
<li class="tabMenu demo81-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>

<div id="demo8-2" class="mt30">
<ul>
<li class="tabMenu demo82-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>
<script type="text/javascript">
(function(){
function createTab(config){
var root = config.root,
menus = getElementsByClassName("tabMenu",root),
contents = getElementsByClassName("tabContent",root),
selectMenuClassname = config.selectMenuClassname || "",
eventType = config.eventType || "click",
autoPlay = config.autoPlay || false,
stayTime = config.stayTime || 5000,
callback = config.callback || null,
currentIndex = 0;

for(var i = 0,n=menus.length;i<n;i++){
(function(n){
menus[n]["on"+eventType] = function(){
showItem(n);
}
})(i);
}

if(autoPlay){
setInterval(function(){
itemsCount = menus.length;
currentIndex = currentIndex >= itemsCount - 1 ? 0 : currentIndex+1 ;
showItem(currentIndex);
},stayTime);
}

function showItem(index){
showContent(index);
if(selectMenuClassname){
focusMenu(index);
}
if(callback){
callback(index);
}
}

function showContent(index){
currentIndex = index;
for(var i=0,n=contents.length;i<n;i++){
if(i==index){
contents[i].style.display = "block";
} else {
contents[i].style.display = "none";
}
}
}

createTab({root:"demo8-1",selectMenuClassname:"demo81-tabMenu-selected",autoPlay:true,stayTime:8000});
createTab({root:"demo8-2",selectMenuClassname:"demo82-tabMenu-selected",eventType:"mouseover",callback:function(index){alert("您激活了第"+(index+1)+"个tab项");}});
})();
</script>

<style type="text/css">
#demo9-1 ul,#demo9-2 ul{padding:0;margin:0}
#demo9-1 .tabMenu,#demo9-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo91-tabMenu-selected{background:blue;color:#fff;}
.demo92-tabMenu-selected{background:green;color:#fff;}
</style>
<p>=====================================================</p>
<h2>版本九</h2>
<div id="demo9-1">
<ul>
<li class="tabMenu demo91-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
<div class="tabContent none">33333</div>
</div>
</div>
<p><input type="button" value="激活第3个tab" id="btn" /></p>
<div id="demo9-2" class="mt30">
<ul>
<li class="tabMenu demo92-tabMenu-selected">menu1</li>
<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
<div class="tabContent">11111<div>一一一一一一一</div></div>
<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>

</div>
<script type="text/javascript">
(function(){
function Tab(config){
this.root = config.root,
this.menus = getElementsByClassName("tabMenu",this.root),
this.contents = getElementsByClassName("tabContent",this.root),
this.selectMenuClassname = config.selectMenuClassname || "",
this.eventType = config.eventType || "click",
this.autoPlay = config.autoPlay || false,
this.stayTime = config.stayTime || 5000,
this.callback = config.callback || null,
this.currentIndex = 0;
this._init();
}

Tab.prototype = {
_init : function(){
this._bindEvent();
this._autoPlay();
},
_bindEvent : function(){
var This = this;
for(var i = 0,n=This.menus.length;i<n;i++){
(function(n){
This.menus[n]["on"+This.eventType] = function(){
This.showItem(n);
}
})(i);
}
},
_autoPlay : function(){
if(!this.autoPlay) return;
var This = this;
setInterval(function(){
itemsCount = This.menus.length;
This.currentIndex = This.currentIndex >= itemsCount - 1 ? 0 : This.currentIndex+1 ;
This.showItem(This.currentIndex);
},This.stayTime);
},
showItem : function(index){
this._showContent(index);
if(this.selectMenuClassname){
this._focusMenu(index);
}
if(this.callback){
this.callback(index);
}
},
_showContent : function(index){
this.currentIndex = index;
for(var i=0,n=this.contents.length;i<n;i++){
if(i==index){
this.contents[i].style.display = "block";
} else {
this.contents[i].style.display = "none";
}
}
},
_focusMenu : function(index){
var menuFocused = getElementsByClassName(this.selectMenuClassname,this.root)[0];
menuFocused.className = menuFocused.className.split(this.selectMenuClassname).join(" ");
this.menus[index].className += " " + this.selectMenuClassname;
}
}

（转载）怎么写tab?的更多相关文章

【转载】写一个js库需要怎样的知识储备和技术程度？
作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...
【转载】写runat="server"有什么用
aspx运行时会被编译,其中没有runat="server"属性的html标签会被直接写入response,有runat="server"属性的html标签会转 ...
微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
httpappplication 和 httpmodule 的理解（转载，写的很好）
第一部分:转载自Artech IIS与ASP.NET管道 ASP.NET管道以IIS 6.0为例,在工作进程w3wp.exe中,利用Aspnet_ispai.dll加载.NET运行时(如果.NET ...
小程序写tab和swiper切换结合效果
实现代码如下: wxml页面 <scroll-view scroll-x="true" class="weui-navbar"> <block ...
掘金转载-手写一个Promise
目录一什么是Promise ? 二 Promises/A+ 规范 2.1 术语 2.2 基本要求 2.2.1. Promise的状态 2.2.2. Then 方法 2.3 简易版实践 2.4 进一 ...
教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换方法一:模 ...
DataSet和List<T> 泛型之间互相转换 (转载, 作者写的很好)
/DataSet与泛型集合间的互相转换 //利用反射机制将DataTable的字段与自定义类型的公开属性互相赋值. //注意:从DataSet到IList<T>的转换,自定义类型的公开属性 ...
jquery写tab切换,三行代码搞定
<script type="text/javascript"> $("button").on("click",function( ...

随机推荐

触摸屏校准tslib的配置文件
./autogen.sh#sleep 10./configure --prefix=/usr/lxl/tslib --host=arm-linux CC=arm-linux-gcc#sleep 100 ...
C++ this指针详解
C++this指针操作在这里总结一下this 指针的相关知识点. 首先,我们都知道类的成员函数可以访问类的数据(限定符只是限定于类外的一些操作,类内的一切对于成员函数来说都是透明的),那么成员 ...
shell基本语法备忘
1.第一行要写明shell种类 #!/bin/bash 2.打印输出 #!/bin/bashecho "Hello World !~" 3.变量定义变量=前后不能有空格, ...
cocos2dx中导演的职责有哪些？
1.一个游戏里面只有一个导演,因此采用了单例的设计模式,用getInstance方法来获得 2.游戏中导演负责openGL ES的初始化,场景的切换,游戏的暂停继续(相当于拍电影的ka),节点坐标与世 ...
DataGridView控件
DataGridView控件 DataGridView是用于Windows Froms 2.0的新网格控件.它可以取代先前版本中DataGrid控件,它易于使用并高度可定制,支持很多我们的用户需要的特 ...
maven安装报错
今天在安装maven时安照说明配置环境变量,通过命令检查: mvn -v 竟然出现以下错误,很郁闷的是我明明配置了JAVA_HOME,并且别的依赖java的东西都能用,通过java -version也 ...
multiple backgrounds
multiple backgrounds 多重背景,也就是CSS2里background的属性外加origin.clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值:用 ...
c编程之排序
1 #include<stdio.h> 2 #include<stdlib.h> 3 #include<string.h> 4 typedef struct Nod ...
android开发图片合成
private static Bitmap compositeImages(Bitmap srcBitmap,Bitmap dstBitmap){ Bitmap bmp = null; //下面这个B ...
【 Regular Expression Matching 】cpp
题目: Implement regular expression matching with support for '.' and '*'. '.' Matches any single chara ...

（转载）怎么写tab?

（转载）怎么写tab?的更多相关文章

随机推荐

热门专题