<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-tab标签切换</title>
<style>
.tabcontainer{
padding:5px;
width:500px;
margin:20px;
}
.tabcontainer ul{
padding:0;
margin:0;
display:none;
}
.tabnavigation ul li{
padding:3px;
display: inline;
border:1px solid #000;
background-color:#fff;
}
.tabnavigation ul li:hover{
cursor:pointer;
}
.tabpages{
position:relative;
z-index: 2;
border:1px solid #000;
background-color:#fff;
}
.tabpage{
margin:0 10px;
}
</style> <script>
window.onload = function(){
var containers = document.querySelectorAll(".tabcontainer");
//console.log(containers);
for(var j = 0;j<containers.length;j++){
var nav = containers[j].querySelector(".tabnavigation ul");
nav.style.display = "block";
var navitem = containers[j].querySelector(".tabnavigation ul li");
var ident = navitem.id.split("_")[1]; navitem.parentNode.setAttribute("data-current",ident);
navitem.setAttribute("style","background-color:#f00;"); var pages = containers[j].querySelectorAll(".tabpage");
//console.log(pages);
for(var i = 0; i < pages.length;i++){
pages[i].style.display = "none";
}
var tabs = containers[j].querySelectorAll(".tabnavigation ul li");
//console.log(tabs);
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = displayPage;
};
} }
function displayPage(){
var current = this.parentNode.getAttribute("data-current");
console.log(current);
document.getElementById("tabnav_"+current).setAttribute("style","background-color:#fff");
document.getElementById("tabpage_"+current).style.display="none"; var ident = this.id.split("_")[1];
//console.log(ident);
this.setAttribute("style","background-color:#f00");
document.getElementById("tabpage_"+ident).style.display = "block";
this.parentNode.setAttribute("data-current",ident);
}
</script> </head> <body> <div class = "tabcontainer">
<div class="tabnavigation">
<ul>
<li id="tabnav_1">页面1</li>
<li id="tabnav_2">页面2</li>
<li id="tabnav_3">页面3</li>
</ul>
</div> <div class="tabpages">
<div class="tabpage" id="tabpage_1">
<p>页面1</p>
</div>
<div class="tabpage" id="tabpage_2">
<p>页面2</p>
</div>
<div class="tabpage" id="tabpage_3">
<p>页面3</p>
</div>
</div>
</div>
<div class="tabcontainer">
<div class="tabnavigation">
<ul>
<li id="tabnav_4">页面2—1</li>
<li id="tabnav_5">页面2—2</li>
</ul>
</div>
<div class="tabpages">
<div class="tabpage" id="tabpage_4">
<p>页面4</p>
</div>
<div class="tabpage" id="tabpage_5">
<p>页面5</p>
</div>
</div>
</div>
</body>
</html>

每天一个JavaScript实例-tab标签切换的更多相关文章

  1. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  2. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  3. 很好用的Tab标签切换功能,延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  4. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  5. 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  6. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. zookeeper命令行(zkCli.sh&amp;zkServer.sh)使用及四字命令

    zookeeper提供了很多方便的功能,方便我们查看服务器的状态,增加,修改,删除数据(入口是zkServer.sh和zkCli.sh). 还提供了一系列四字命令,方便我们跟服务器进行各种交互,来确认 ...

  2. 【python】pathlib库

    pathlib在python3.2以上开始默认支持,在python2.7中如果要使用需要安装 pip install pathlib pathlib更多参考资料:http://pathlib.read ...

  3. poj 3164 Command Network

    http://poj.org/problem?id=3164 第一次做最小树形图,看着别人的博客写,还没弄懂具体的什么意思. #include <cstdio> #include < ...

  4. zIndex属性在IE中无效

    在ie中他的子类的zindex就以父类为准: <!doctype html> <html> <head> <meta charset="utf-8& ...

  5. CSS常用属性计算原理

    absolute: left.right/top.bottom 的百分比值分别根据父元素的 wdith / height 计算 margin: top /right / bottom/ left 的百 ...

  6. Java 单例(Singleton)模式

    一.什么是单例模式: 单例模式是一种确保了一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.被实例化的类称为单例类. 二.单例模式的特点: 单例类只有一个实例. 单例类必须自行创建自己唯一的 ...

  7. kubernetes 利用label标签来绑定到特定node运行pod

    利用label标签来绑定到特定node运行pod: 不如将有大量I/O的pod部署到配置了ssd的node上或者需要使用GPU的pod部署到某些安装了GPU的节点上 查看节点的标签: kubectl ...

  8. sql server系统存储过程大全

    关键词:sql server系统存储过程,mssql系统存储过程 xp_cmdshell --*执行DOS各种命令,结果以文本行返回. xp_fixeddrives --*查询各磁盘/分区可用空间 x ...

  9. java高分局之jstat命令使用(转)

    转自:http://blog.csdn.net/h_025/article/details/52813817 java高分局之jstat命令使用 jstat命令可以查看堆内存各部分的使用量,以及加载类 ...

  10. ubuntu-server14.04 网络配置

    一.启动网卡 ubuntu server 安装后,ifconfig 发现只有一个lo 和一个p1p1 网卡, 先查看服务器网卡:ifconfig -a ,发现有lo ,p1p1,p2p1,p3p1,p ...