每天一个JavaScript实例-tab标签切换
<!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标签切换的更多相关文章
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- Bootstrap——设置Tab标签切换
最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...
- 很好用的Tab标签切换功能,延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- 每天一个JavaScript实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-推断图片是否载入完毕
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-递归实现反转数组字符串
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- new一个接口
首先我们先看看接口的定义: 接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方 ...
- Hdu-6253 2017CCPC-Final K.Knightmare 规律
题面 题意:给你一个无限大的棋盘,一个象棋中的马,问你这个马,飞n步后,可能的位置有多少种? 题解:看到题,就想先打表试试,于是先写个暴力(枚举每个位置,是马就飞周围8个格子,注意不要在同个循环里把格 ...
- 读入图片显示scipy.misc module has no attribute imread?
>>> import scipy >>> scipy.misc <module 'scipy.misc' from 'C:\Python27\lib\site ...
- Email非正则表达式的判断
判断一个邮件是否合法,我们除了可以使用正则表达四以外还可以利用,Email地址的规律进行判断,那么一个合法的Email有哪些要求昵?具体如下: 必须有@与. @必须在第一个.之前 @与.不能连在一起 ...
- jQuery hooks源码学习
段落不够清晰,待整理 看jQuery源码的时候,经常见到含有hooks标志的对象,如cssHooks, attrHooks, propHooks, valHooks. 下面对其中的一段进行解读. jQ ...
- guice基本使用,配置模块的两种方式(三)
guice是使用module进行绑定的,它提供了两种方式进行操作. 第一种是继承AbstractModule抽象类. package com.ming.user.test; import com.go ...
- 如何在C#中运行数学表达式字符串
方法1:利用DataTable中的Compute方法 1 string expression = "1+2*3"; 2 DataTable eval = new DataTable ...
- window下svn开机自动启动
- 第7章 性能和可靠性模式 Load-Balanced Cluster(负载平衡群集)
上下文 您已经决定在设计或修改基础结构层时使用群集,以便在能够适应不断变化的要求的同时保持良好的性能. 问题 在保持可接受的性能级别的同时,如何设计一个可适应负载变化的.可伸缩的基础结构层? 影响因素 ...
- [原创]C++中一些重要概念
1.虚函数 虚函数的作用是允许在派生类中重新定义与基类同名的函数,并且可以通过基类指针或引用来访问基类和派生类中的同名函数.当把基类的某个成员函数声明为虚函数后,允许在其派生类中对该函数重新定义,赋予 ...