<!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. Vue.js和Nodejs的关系

    首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你 ...

  2. SwiftUI 官方教程（七）

    7. 给子 View 传递数据 LandmarkDetail 现在依然使用硬编码的数据来显示地标.像 LandmarkRow 一样,LandmarkDetail 类型和它组合的其他 view 都需要一 ...

  3. Excel 查找某列中的数据在另一列是否存在并输出其他列的数据

    最近在操作Excel文件数据导入数据库时,经常需要检查Excel中哪些数据数据库中已经存在,哪些不存在,然后再将不存在数据库中的Excel数据导入:在此过程中,经常需要操作Excel中的数据,所以.也 ...

  4. SDAutoLayout的使用

    ## 简介- IOS布局的三个阶段:MagicNumber -> AutoResizingMask -> AutoLayout- 自动布局三大框架:UILayoutConstraint(原 ...

  5. Three入门学习笔记整理

    一.官方网站:https://threejs.org 二.关于Three.js 三.开始 四.实例 基本结构 结果 五.概念 坐标系 场景 相机 灯光 3D模型 六.简单动画 七.交互控制 结束 # ...

  6. （转）50 个 jQuery 小技巧

    1. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ajaxSettings:{ contentType:"application/x-w ...

  7. hdu2686/hdu3376 最小费用流最大流 拆点

    虽然题目求的是最大费用,但是我们可以通过转换就变为最小费用.用一个比最大值更的数与每个数的差作为费用值.最后处理回来就i可以了.有些人用直接每个值都乘以-1,这样更简单. 做这题,我对为什么不拆点就会 ...

  8. 【Oracle】闪回drop后的表

    本文介绍的闪回方式只适用于:删除表的表空间非system,drop语句中没有purge关键字(以上两种情况的误删除操作只能通过日志找回): 1.删除表后直接从回收站闪回 SCOTT@LGR> d ...

  9. Swift 字典 Dictionary基本用法

    import UIKit /* 字典的介绍 1.字典允许按照某个键访问元素 2.字典是由两部分组成, 一个键(key)集合, 一个是值(value)集合 3.键集合是不能有重复的元素, 值集合可以有重 ...

  10. css超出不换行可滑动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...