<!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. 【NOIP2011 Day 1】选择客栈

    [问题描述] 丽江河边有n家客栈,客栈按照其位置顺序从1到n编号.每家客栈都按照某一种色调进行装饰(总共k种,用整数0 ~ k-1表示),且每家客栈都设有一家咖啡店,每家咖啡店均有各自的最低消费.两位 ...

  2. C#中DataSet中的relation

    //关系定义的方法是 DataRelation 变量名 = “DataSet对象”.Relations.Add("关系名",DataSet对象.主表.列名 , DataSet对象. ...

  3. webpack打包css自动添加css3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  4. 用JS解决Asp.net Mvc返回JsonResult中DateTime类型数据格式的问题

    当用ajax异步时,返回JsonResult格式的时候,发现当字段是dateTime类型时,返回的json格式既然是“/Date(1435542121135)/” 这样子的,当然这不是我们想要的格式. ...

  5. 使用UMDH进行内心泄露分析

    事前准备 1.安装windbg,安装好后在path中添加其安装目录(目的是为了执行命令行简单) 2.(设置符号路径,一般为接口所在路径)运行cmd,执行命令:set _NT_SYMBOL_PATH=d ...

  6. python第三方模块大杂烩

    Python单元测试框架之pytest---如何执行测试用例 unittest单元测试框架实现参数化 (用例有相似参数断言时使用,可以精简代码) python中标示符作用详解 一篇文章让你彻底搞清楚P ...

  7. Github 团队协作基本流程与命令操作 图解git工作流程

    # 先 fork 项目到自己 github # 1. 从自己仓库克隆到本地(clone 的是项目指定的默认分支,比如 master) git clone git@github.com:me/em.gi ...

  8. CorelDRAW 2019线上发布会报名已开始

    近日,由苏州思杰马克丁软件公司独家代理的CorelDRAW 2019将在苏州开启一场设计上的饕餮盛宴,您报名了么? 不管您是专业的设计师还是热爱设计的狂热粉丝,都将有机会参与到我们的活动中,为了这场盛 ...

  9. 跳出语句 break continue

    break 使用场景:终止switch或者循环 在选择结构switch语句中 在循环语句中 离开使用场景的存在是没有意义的 public static void main(String[] args) ...

  10. Bootstrap 4 - Glyphicons migration?

     https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration Migrating from Glyphi ...