标签页（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 * ...

随机推荐

Week__8
Monday_ 今晚补了扔鸡蛋问题的动态规划问题,补了这道题,感觉视野又开阔了些. 写了一道思维题cf 1066A 数字逻辑后半节听得打脑壳,现在很晚了,明天再看叭. Tuesday_ 今晚补了 ad ...
linux 硬链接软链接
硬链接链接文件的INode和源文件相同,删除互不影响,不支持跨分区,不支持目录软链接链接文件有单独的INode,其Block中存储源文件的INode信息,相当于windows中的快捷方式 ln ...
vue项目中使用axios上传图片等文件
form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...
1、python环境安装及软件介绍
软件: python3.0 下载地址:https://www.python.org/downloads/windows/ pycharm 下载地址: https://www.jetbrains.com ...
cdnbest常见http状态码解释
cdnbest的常见状态码提示界面: 400状态码:语义有误,当前请求无法被服务器理解网站访问报这个提示:host not found(找不到主机),这是没有同步站点信息到这个节点上,检查节点连接主 ...
POJ-1797.HeavyTransportation(最长路中的最小权值)
本题思路:最短路变形,改变松弛方式即可,dist存的是源结点到当前结点的最长路的最小权值. 参考代码: #include <cstdio> #include <cstring> ...
从汇编层面解释switch语句判断快速的原因
源码如下: #include <stdio.h> void main(){ int flag; flag=1; switch (flag){ ...
152. Maximum Product Subarray最大乘积子数组/是否连续
［抄题］: Given an integer array nums, find the contiguous subarray within an array (containing at least ...
vue.js中内联样式style三元表达式
<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...
Vue 的生命周期图

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

概述

本节内容

js实现

jquery实现

bootstrap实现

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

随机推荐

热门专题