<!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. quartz + spring 启动项目时，报错The web application [] appears to have started a thread named.........

    只是想记录自己的错误信息,下次再出现就知道怎么操作,不用再查找资料 解决办法: package com.wqq.quartz_test.schedule; import javax.servlet.S ...

  2. Linux下JDK Tomcat MySQL基本环境搭建

    1. 安装JDK wget http://download.oracle.com/otn-pub/java/jdk/8u181-b13/96a7b8442fe848ef90c96a2fad6ed6d1 ...

  3. c# 正则表达式regex心得

    5.1. C#中的正则表达式的简介 C#中的Regex类处理正则表达式. 5.2. C#正则表达式的语法 5.3. C#中的正则表达式的特点 下面总结一些C#中的正则表达式相对于其他语言中的正则表达式 ...

  4. ThinkPHP搜索框需要注意的事项

    1.当搜索成功后需要用到分页的时候,form表单需要用get传参 2.编码方式 当编码方式不正确的时候,使用分页类改变分页,会使搜索框里面的内容乱码 改变编码方式的方法 第一种:header(&quo ...

  5. 每条sql语句实际上都是一个事物（事物多种类型解读）

    事务(数据库引擎) 事务是作为单个逻辑工作单元执行的一系列操作.一个逻辑工作单元必须有四个属性,称为原子性.一致性.隔离性和持久性 (ACID) 属性,只有这样才能成为一个事务.原子性事务必须是原子工 ...

  6. 2.TinkPHP入门----控制器

    1.控制器创建 命名规则:控制器名称+Controller+.class.php, 例如GoodsController.class.php  UserController.class.php 控制器结 ...

  7. spring中quatz的多定时任务配置图文详解

    近来公司让用quatz框架做定时功能,而且还是执行多定时任务,真是苦恼. 虽然从网上搜了很多资料,但是写法上不太尽如人意,最后还是请教了螃蟹大神,给的配置建议就是简单啊,现在拿来分享下: 这里我们需要 ...

  8. 目录处理文件&链接命令

    一.目录处理文件 1.删除文件或目录 rm -rf [文件或目录]           //remove:删除文件或目录  -r:删除目录  -f:强制 2.复制文件或目录 cp [选项] [原文件或 ...

  9. window窗口操作

    打开新窗口 window.open([url],[窗口名称],[参数字符串]) window.open("http://baidu.com","_balnk", ...

  10. （转）RabbitMQ学习之路由（java）

    http://blog.csdn.net/zhu_tianwei/article/details/40887755 参考:http://blog.csdn.NET/lmj623565791/artic ...