<!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. mysql查询orderby

    --按某一字段分组取最大(小)值所在行的数据 /* 数据如下: name val memo a    2   a2(a的第二个值) a    1   a1--a的第一个值 a    3   a3:a的 ...

  2. 【BZOJ1597】【Usaco2008 Mar】土地购买 斜率优化DP

    题目: 题目在这里 思路与做法: 这题如果想要直接dp的话不太好处理. 不过, 我们发现如果\(a[i].x>=a[j].x\)且\(a[i].y>=a[j].y\) \((\)a是输入的 ...

  3. ASP.NET MVC上传文件 未显示页面，因为请求实体过大。解方案

    在Dropzone中设置   maxFilesize: 350, //MB 但上传的文件没有到最大限定350MB,就报出来 未显示页面,因为请求实体过大的错误 Web.config中设置  maxAl ...

  4. BZOJ 1061费用流

    思路: 我们可以列出几个不等式 用y0带进去变成等式 下-上 可以消好多东西 我们发现 等式左边的加起来=0 可以把每个方程看成一个点 正->负 连边 跑费用流即可 //By SiriusRen ...

  5. NOIP2012 D2 T2 借教室 线段树 OR 二分法

    题目描述: 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自 ...

  6. LeetCode Weekly Contest 27

    1. 557. Reverse Words in a String III 分割字符串,翻转. class Solution { public: string reverseWords(string ...

  7. 导入Excel时去除多余的空白行

    https://blog.csdn.net/shuishousuiyue/article/details/44773987 按着上面链接用的第一种方式,如下图所示:第二种方式要遍历每一个Excel单元 ...

  8. jQuery中事件模块介绍

    事件模块 1.提供其他DOM方法 包括:next 和 nextAll方法 1.1 next方法实现 目标:扩展框架方法,获取当前元素的下一个元素 问题:如何获取下一个元素? 1.1.1 提供 next ...

  9. 2017-4-18 关于小组APP

    演讲: 各位合作伙伴:我们的产品:图书鉴赏是为了解决18岁到28岁青年的痛苦,他们需要更好的图书推荐,更多的好书,但是现有的方案并没有能很好的解决这些需求,我们有独特的办法制作一个图书鉴赏的APP,它 ...

  10. 数据库_数据分片与mycat服务

    1.数据分片; 2.部署mycat服务;3.基于mycat服务创建新库新表. 一,数据分片 1.数据分片,也叫分库分表,即将存放在一台数据库服务器中的数据,按照特定方式进行拆分,分散存放到其它多台服务 ...