标签页（tab）切换的原生js,jquery和bootstrap实现

概述

这是我在学习课程Tab选项卡切换效果时做的总结和练手。

原课程中只有原生js实现，jquery和bootstrap实现是我自己补上的。

本节内容

标签页（tab）切换的原生js实现
标签页（tab）切换的jquery实现
标签页（tab）切换的bootstrap实现

js实现

说明：

代码是我自己写的，与课程中的不一样。
主要利用display:none来把部分内容隐藏而显示其它内容。
遇到了事件的循环绑定，我是利用添加id使其成为钩子来解决的。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>tab切换</title>

	<style type="text/css">

		*{

			font-family: Times;

		}

		#main {

			font-size: 13px;

			height: 100px;

			width: 300px;

			border: 1px solid #c0c0c0;

		}

		#top_column {

			height: 30px;

			width: 300px;

		}

		#top_column div {

			height: 30px;

			width: 75px;

			background-color: #fffff0;

			text-align: center;

			line-height: 30px;

			border: 1px solid #c0c0c0;

			margin: -1px -1px 0px -1px;

		}

		#top_column div:hover {

			background-color: #fff;

			font-weight:bold;

			color: orange;

		}	

		.top_column_hover {

			background-color: #fff;

			font-weight:bold;

			color: orange;

		}			

		#bottom_column {

			height: 70px;

			width: 300px;

		}

		#bottom_column a {

			height: 35px;

			width: 140px;

			display: block;

			text-align: left;

			text-decoration: none;

			outline: none;

			color: black;

			line-height: 35px;

			padding-left: 10px;

			float: left;

		}

		#bottom_column a:hover {

			color: orange;

		}

		#main div {

			float: left;

		}

	</style>

</head>

<body>

	<div id="main">

		<div id="top_column">

			<div class="column_notice">公告</div>

			<div class="column_rule">规则</div>

			<div class="column_forum">论坛</div>

			<div class="column_security">安全</div>

		</div>

		<div id="bottom_column">

			<div class="content_notice" style="display:block">

				<a href="#" class="notice1">颠覆式创新</a>

				<a href="#" class="notice2">旗舰来了</a>

				<a href="#" class="notice3">全国首测</a>

				<a href="#" class="notice4">千年一遇</a>

			</div>

			<div class="content_rule" style="display:none">

				<a href="#" class="rule1">司机高速</a>

				<a href="#" class="rule2">北欧村名</a>

				<a href="#" class="rule3">高校老师</a>

				<a href="#" class="rule4">公安工作组</a>

			</div>

			<div class="content_forum" style="display:none">

				<a href="#" class="forum1">百度贴吧</a>

				<a href="#" class="forum2">哈尔滨</a>

				<a href="#" class="forum3">麦当劳</a>

				<a href="#" class="forum4">光头哥</a>

			</div>

			<div class="content_security" style="display:none">

				<a href="#" class="security1">经纪人</a>

				<a href="#" class="security2">以上处于</a>

				<a href="#" class="security3">国足领队</a>

				<a href="#" class="security4">国务院</a>

			</div>

		</div>

	</div>

	<script type="text/javascript">

		window.onload=tab;

		function tab(){

			var top_column=document.getElementById("top_column").getElementsByTagName("div");

			var bottom_column=document.getElementById("bottom_column").getElementsByTagName("div");

			for(var i=0;i<top_column.length;i++){

				top_column[i].id=i;

				top_column[i].onmouseover=function(){

					tab_content(this.id);

				}

			}

			function tab_content(i){

				for(var j=0;j<top_column.length;j++){

						top_column[j].className="top_column_not_hover";

						bottom_column[j].style.display="none";

				}

				top_column[i].className="top_column_hover";

				bottom_column[i].style.display="block";

			}

		}

	</script>

</body>

</html>

jquery实现

说明：

效果其实和原生js实现是一样的。
因为我想写一下jquery代码练练手，所以只是把原生js实现中的js代码改成了jquery的形式。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>tab切换</title>

	<style type="text/css">

		*{

			font-family: Times;

		}

		#main {

			font-size: 13px;

			height: 100px;

			width: 300px;

			border: 1px solid #c0c0c0;

		}

		#top_column {

			height: 30px;

			width: 300px;

		}

		#top_column div {

			height: 30px;

			width: 75px;

			background-color: #fffff0;

			text-align: center;

			line-height: 30px;

			border: 1px solid #c0c0c0;

			margin: -1px -1px 0px -1px;

		}

		#top_column div:hover {

			background-color: #fff;

			font-weight:bold;

			color: orange;

		}	

		.top_column_hover {

			background-color: #fff;

			font-weight:bold;

			color: orange;

		}			

		#bottom_column {

			height: 70px;

			width: 300px;

		}

		#bottom_column a {

			height: 35px;

			width: 140px;

			display: block;

			text-align: left;

			text-decoration: none;

			outline: none;

			color: black;

			line-height: 35px;

			padding-left: 10px;

			float: left;

		}

		#bottom_column a:hover {

			color: orange;

		}

		#main div {

			float: left;

		}

	</style>

</head>

<body>

	<div id="main">

		<div id="top_column">

			<div class="column_notice">公告</div>

			<div class="column_rule">规则</div>

			<div class="column_forum">论坛</div>

			<div class="column_security">安全</div>

		</div>

		<div id="bottom_column">

			<div class="content_notice" style="display:block">

				<a href="#" class="notice1">颠覆式创新</a>

				<a href="#" class="notice2">旗舰来了</a>

				<a href="#" class="notice3">全国首测</a>

				<a href="#" class="notice4">千年一遇</a>

			</div>

			<div class="content_rule" style="display:none">

				<a href="#" class="rule1">司机高速</a>

				<a href="#" class="rule2">北欧村名</a>

				<a href="#" class="rule3">高校老师</a>

				<a href="#" class="rule4">公安工作组</a>

			</div>

			<div class="content_forum" style="display:none">

				<a href="#" class="forum1">百度贴吧</a>

				<a href="#" class="forum2">哈尔滨</a>

				<a href="#" class="forum3">麦当劳</a>

				<a href="#" class="forum4">光头哥</a>

			</div>

			<div class="content_security" style="display:none">

				<a href="#" class="security1">经纪人</a>

				<a href="#" class="security2">以上处于</a>

				<a href="#" class="security3">国足领队</a>

				<a href="#" class="security4">国务院</a>

			</div>

		</div>

	</div>

	<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>

	<script type="text/javascript">

	$(window).load(function(){

		var $top_column=$("#top_column div");

		var $bottom_column=$("#bottom_column div");

		$.each($top_column,function(i,item){

			$(item).hover(tab_content);

		})

		function tab_content(){

			$.each($top_column,function(i,item){

				$(item).attr("class", "top_column_not_hover");

			})

			$.each($bottom_column,function(i,item){

				$(item).hide();

			})

			var index=$top_column.index($(this));

			$bottom_column.eq(index).show();

			$top_column.eq(index).attr("class", "top_column_hover");

		}

	})

	</script>

</body>

</html>

bootstrap实现

说明：

代码中不需要额外写js，只需引用jquery和bootstrap文件即可。
虽然不需要写js，但是缺点是需要点击，并且鼠标离开后回复原状，解决这些问题的话需要写js。
虽然bootstrap看起来很华丽，而且很简便。但是在一些小改动上面很麻烦，而且会踩很多坑。所以如果需要细致并且频繁修改网站的话，不建议用bootstrap搭建网站。
踩坑记录：box-sizing 属性的content-box和border-box（其实这也是盒模型的基本）。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>tab切换</title>

	<style type="text/css">

		*{

			font-family: Times;

		}

		#main {

			font-size: 13px;

			height: 100px;

			width: 300px;

			border: 1px solid #c0c0c0;

			margin:10px 10px;

			box-sizing: content-box;

		}

		#myTab {

			height: 30px;

			width: 300px;

		}

		#myTab div {

			height: 30px;

			width: 75px;

			background-color: #fffff0;

			text-align: center;

			line-height: 30px;

			border: 1px solid #c0c0c0;

			margin: -1px -1px 0px -1px;

			box-sizing: content-box;

		}

		#myTab div:hover {

			background-color: #fff;

			font-weight:bold;

			color: orange;

			cursor: pointer;

		}				

		#myTabContent {

			height: 70px;

			width: 300px;

		}

		#myTabContent a {

			height: 35px;

			width: 140px;

			display: block;

			text-align: left;

			text-decoration: none;

			outline: none;

			color: black;

			line-height: 35px;

			padding-left: 10px;

			float: left;

		}

		#myTabContent a:hover {

			color: orange;

		}

		#main div {

			float: left;

		}

	</style>

</head>

<body>

	<div id="main">

		<div id="myTab" class="nav nav-tabs">

			<div href="#notice" data-toggle="tab">公告</div>

			<div href="#rule" data-toggle="tab">规则</div>

			<div href="#forum" data-toggle="tab">论坛</div>

			<div href="#security" data-toggle="tab">安全</div>

		</div>

		<div id="myTabContent" class="tab-content">

			<div class="tab-pane fade in active" id="notice">

				<a href="#" class="notice1">颠覆式创新</a>

				<a href="#" class="notice2">旗舰来了</a>

				<a href="#" class="notice3">全国首测</a>

				<a href="#" class="notice4">千年一遇</a>

			</div>

			<div class="tab-pane fade" id="rule">

				<a href="#" class="rule1">司机高速</a>

				<a href="#" class="rule2">北欧村名</a>

				<a href="#" class="rule3">高校老师</a>

				<a href="#" class="rule4">公安工作组</a>

			</div>

			<div class="tab-pane fade" id="forum">

				<a href="#" class="forum1">百度贴吧</a>

				<a href="#" class="forum2">哈尔滨</a>

				<a href="#" class="forum3">麦当劳</a>

				<a href="#" class="forum4">光头哥</a>

			</div>

			<div class="tab-pane fade" id="security">

				<a href="#" class="security1">经纪人</a>

				<a href="#" class="security2">以上处于</a>

				<a href="#" class="security3">国足领队</a>

				<a href="#" class="security4">国务院</a>

			</div>

		</div>

	</div>

	<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>

	<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

	<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

	<script type="text/javascript">

	</script>

</body>

</html>

标签页（tab）切换的原生js,jquery和bootstrap实现的更多相关文章

bootstrap 标签页tab切换js（含报错原因）
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
几种tab切换尝试原生js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
tabs(标签页的现成页面)原生js写法
直接上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
标签页tab.js 在栏目之间切换，局部变化
1.在使用bootstrap 中,我们会用到在栏目之间切换,来刷新页面的局部,可以使用下面的方法 <link rel="stylesheet" href="http ...
Bootstrap标签页(Tab)插件
标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法您 ...
EasyUI创建异步树形菜单和动态添加标签页tab
创建异步树形菜单创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...
selenium WebDriver 对浏览器标签页的切换
关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...
标签页的切换方法（DOM）
效果: 1.点击“JAVA语言” 2.点击“C语言” 3.点击C++语言代码: <!doctype html> <html> <head> <meta ch ...
在QMainWindow中利用多个QDockWidget构成标签页tab（原创）
功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...

随机推荐

Object.create() vs new SomeFunction() in javascript
Object.create builds an object that inherits directly from the one passed as its first argument. Wit ...
小事牛刀之——python做文件对比
使用python对比filename1和filenam2的差异,并将差异写入到filename3中. #!/usr/bin/env python # -*- coding: utf-8 -*- # @ ...
关于ie6块元素行内元素转换
1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的: ...
jenkins+sonarQube代码质量扫描并排除指定的目录
sonar.projectKey=dev1-news-paymentsonar.projectName=dev1-news-paymentsonar.projectVersion=$BUILD_NUM ...
20175314 《Java程序设计》第一周学习总结
20175314 <Java程序设计>第一周学习总结教材学习内容总结除了学院统一购买的<Java 2 实用教程(第5版)>我还在网上买了一本<Head ...
git-如何不写注释能自动带上修改文件信息
背景:每次提交git,都要写注释,有些情况注释不太好写,或者根本没有必要写,这时可以通过自动加注释方法,比如可以追加修改了哪些文件解决:通过shell脚本,在脚本里面写git命令,add commi ...
mysql之my.cnf详解
以下是 my.cnf 配置文件参数解释: #*** client options 相关选项 ***# #以下选项会被MySQL客户端应用读取.注意只有MySQL附带的客户端应用程序保证可以读取这段内容 ...
Head First Servlets & JSP 学习笔记第九章 —— 使用JSTL
JSTL1.1 不是JSP2.0规范的一部分!你能访问Servlet和JSP API 不意味着你能访问JSTL! 使用JSTL之前,需要将两个文件("jstl.jar" 和 &qu ...
jquery判断是否是空对象不含任何属性
code function isEmptyObject(e) { var t; for (t in e) return !1; return !0 }
yum提示Another app is currently holding the yum lock
使用yum grouplis列举系统中以组安装的包,结果提示: # yum grouplist Loaded plugins: fastestmirror, refresh-packagekit, s ...

标签页（tab）切换的原生js,jquery和bootstrap实现

概述

本节内容

js实现

jquery实现

bootstrap实现

标签页（tab）切换的原生js,jquery和bootstrap实现的更多相关文章

随机推荐

热门专题