（转载）怎么写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( ...
随机推荐
- Junit单元测试中优先使用AssertThat
主要的优点: 1. 易读性 2. 错误信息更方便 推荐阅读:https://objectpartners.com/2013/09/18/the-benefits-of-using-assertthat ...
- Java Day 14
多线程--线程间通信 对同一个资源进行处理,但是任务却不同 线程间通信--等待唤醒机制 1.wait(); 线程处于冻结状态,被wait线程存储在线程池中 2.notify(); 从线程池唤醒一个 ...
- Lua与C++交互初探之Lua调用C++
Lua与C++交互初探之Lua调用C++ 上一篇我们已经成功将Lua的运行环境搭建了起来,也成功在C++里调用了Lua函数.今天我来讲解一下如何在Lua里调用C++函数. Lua作为一个轻量级脚本语言 ...
- DF与EF的区别
DF:专有文件 EF:基本文件 1.EF没有文件名,只有FID(文件标识符) 2.DF有文件名,又有FID,因此COS可以根据文件名来访问DF
- gameObject, vector and transform
调用其它组件中成员 通过GameObject(游戏物体). Base class for all entities in Unity scenes. 是Unity场景里面所有实体的基类. 可以理解为 ...
- GCC笔记
The History of GCC 1984年,Richard Stallman发起了自由软件运动,GNU (Gnu's Not Unix)项目应运而生,3年后,最初版的GCC横空出世,成为第一款可 ...
- 【Simplify Path】cpp
题目: Given an absolute path for a file (Unix-style), simplify it. For example,path = "/home/&quo ...
- android apk 自我保护技术-加密apk
经过了忙碌的一周终于有时间静下来写点东西了,我们继续介绍android apk防止反编译技术的另一种方法.前两篇我们讲了加壳技术(http://my.oschina.net/u/2323218/blo ...
- jquery实现select下拉框可输入+联想关联option
下面代码摘自http://www.oschina.net/question/96791_12832 <script language="javascript" src=&qu ...
- BLUR
ssao的blur遇到个麻烦 花了两三天时间...终于大概知道原因了. 在nvidia的ssao(http://developer.download.nvidia.com/SDK/10.5/direc ...