（转载）怎么写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( ...

随机推荐

asp.net mvc 错误路由默认配置
问题描述:默认情况下mvc已经将路由参数设置配置好了,这里就不在讲解,请到园子搜索,有很多这方面相关的文章.这里讲述的是,一个MVC项目中,我们输入一个错误的URL,或者根本不存在的URL,如:htt ...
UITextField swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...
桥接模式和NAT模式
linux的目录结构配置ip三种模式桥接模式 nat模式(VMnet8) 配置网关 DHCP动态分配IP设置 linux的目录结构配置ip三种模式桥接模式 (1) 设置主系统的" ...
BF算法
BF算法是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串P的第一个字符进行匹配,若相等,则继续比较S的第二个字符和P的第二个字符:若不相等,则比较S的第二个字符和P的第一个字符, ...
c语言编程之二叉排序树
二叉排序树,又称为二叉查找树.它是一颗空树,或者是具有下面的性质的二叉树: 1.若它的左子树不空,则左子树上所有节点的值均小于它的根结构的值: 2.若它的右子树不空,则右子树上所有节点的值均大于它的根 ...
elasticsearch-查询的基本语法
elasticsearch的查询有两部分组成:query and filter. 两者的主要区别在于:filter是不计算相关性的,同时可以cache.因此,filter速度要快于query. 先记录 ...
1、android orm之greendao
前提:最近写android项目,android自带数据库api有点复杂,于是偷懒用了greendao.greendao好处自己查,这里不赘述,但是零基础的的我用起来还是费了3天的功夫,取之于网络,特在 ...
Jquery.ajax(……)
ajax 详细解释:http://www.cnblogs.com/mybest/archive/2011/12/13/2285730.html: 问题描述:页面发送ajax请求,服务器端返回代码总是进 ...
【BZOJ】【1018】【SHOI2008】堵塞的交通traffic
线段树这题的线段树+分类讨论蛮神奇的……我以前学的线段树简直就是渣渣QAQ 看了下ydc题解里的思想>_>用线段树维护连通性!那么就自己写吧……每个节点表示一段区间的连通性(我的叶子节点 ...
Codeforces Round #263 (Div. 2)
吐槽:一辈子要在DIV 2混了. A,B,C都是简单题,看AC人数就知道了. A:如果我们定义数组为N*N的话就不用考虑边界了 #include<iostream> #include &l ...

（转载）怎么写tab?

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

随机推荐

热门专题