（转载）怎么写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>
<!-- 版本1开始 -->
<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>
<!-- 版本1结束 -->
<!-- 版本2开始 -->
<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>
<!-- 版本2结束 -->
<!-- 版本3开始 -->
<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);
}
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";
}
}
}
})();
</script>
<!-- 版本3结束 -->
<!-- 版本4开始 -->
<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);
}
function showContent2(index){
for(var i=0,n=contents2.length;i<n;i++){
if(i==index){
contents2[i].style.display = "block";
} else {
contents2[i].style.display = "none";
}
}
}
})();
</script>
<!-- 版本4结束 -->
<!-- 版本5开始 -->
<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>
<!-- 版本5结束 -->
<!-- 版本6开始 -->
<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>
<!-- 版本6结束 -->
<!-- 版本7开始 -->
<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";
}
}
}
function focusMenu(index){
var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
menus[index].className += " " + selectMenuClassname;
}
}
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>
<!-- 版本7结束 -->
<!-- 版本8开始 -->
<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";
}
}
}
function focusMenu(index){
var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
menus[index].className += " " + selectMenuClassname;
}
}
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>
<!-- 版本8结束 -->
<!-- 版本9开始 -->
<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;
}
}
var tab1 = new Tab({root:"demo9-1",selectMenuClassname:"demo91-tabMenu-selected",autoPlay:true,stayTime:8000});
new Tab({root:"demo9-2",selectMenuClassname:"demo92-tabMenu-selected",eventType:"mouseover",callback:function(index){alert("您激活了第"+(index+1)+"个tab项");}}); document.getElementById("btn").onclick = function(){
tab1.showItem(2);
}
})();
</script>
<!-- 版本9结束 -->
</body>
</html>
（转载）怎么写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( ...
随机推荐
- POC - ASP.NET & IIS 部分
终于得到了我VM的管理员权限啦啦.接下来不需要把IIS架在我自己的电脑上了,将架在我的VM上. 1. 先添加ISAP和CGI的组件. 2. 将defaultAppPool的MODE设为CLASSIC, ...
- 谈谈C#中的 Dispose 和 Finalize
主要有一下几点需要知道: 1. Dispose需要实现IDisposable接口. Finalize就是c#中的析构方法,方法名以~开始. 2. Dispose由开发人员代码调用,而Finalize由 ...
- Node.js 学习（五）Node.js 事件循环
Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.j ...
- 深入探讨Java类加载机制
一.前言 毕业至今,已经三年光景,平时基本接触不到关于类加载器的技术(工作上),相信很多同行在开始工作后很长一段时间,对于类的加载机制都没有深入的了解过,之前偶然的机会接触了相关的知识,感觉挺有意思, ...
- 仿百度搜索（AJAX）
<h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> < ...
- git学习，什么是git？
什么是 Git? 百度百科显示,Git是 Linux 之父 Linus Trovalds,为管理 Linux 内核代码而建立的,被认为是分布式版本控制工具中的顶级水准.智能.友好.强健.高效. 正如所 ...
- ionic 实现双击返回键退出应用功能
ionic 实现双击返回键退出应用功能 keywords cordova,ngcordova,phonegap,ionic,双击,返回键,退出 例子 准备Toast插件,提示用,用户体验好点,不是必须 ...
- bzoj 2821 分块处理
大题思路就是分块,将n个数分成sqrt(n)个块,然后 处理出一个w数组,w[i,j]代表第i个块到第j个块的答案 那么对于每组询问l,r如果l,r在同一个块中,直接暴力做就行了 如果不在同一个块中, ...
- 【BZOJ】【1027】【JSOI2007】合金
计算几何/凸包/Floyd Orz rausen大爷太强辣 计算几何题目果然不会做>_> 这个题……虽然他给了3个坐标,但实际上是个二维的计算几何题= =因为第三维坐标可以直接用前两维坐标 ...
- nginx上如何支持.htaccess伪静态转向
我们知道在apache上有一个常用的功能.htaccess转向,只要apache编译的时候指明支持rewrite模块就可以了. 但是换到nginx上方法会有一点不一样,网上很多人说把.htaccess ...