概述

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

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

本节内容

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

js实现

说明：

  1. 代码是我自己写的，与课程中的不一样。
  2. 主要利用display:none来把部分内容隐藏而显示其它内容。
  3. 遇到了事件的循环绑定，我是利用添加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实现

说明：

  1. 效果其实和原生js实现是一样的。

  2. 因为我想写一下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实现

说明：

  1. 代码中不需要额外写js，只需引用jquery和bootstrap文件即可。
  2. 虽然不需要写js，但是缺点是需要点击，并且鼠标离开后回复原状，解决这些问题的话需要写js。
  3. 虽然bootstrap看起来很华丽，而且很简便。但是在一些小改动上面很麻烦，而且会踩很多坑。所以如果需要细致并且频繁修改网站的话，不建议用bootstrap搭建网站。
  4. 踩坑记录：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实现的更多相关文章

  1. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  2. 几种tab切换尝试 原生js

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

  3. tabs(标签页的现成页面)原生js写法

    直接上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. 标签页tab.js 在栏目之间切换，局部变化

    1.在使用bootstrap 中,我们会用到在栏目之间切换,来刷新页面的局部,可以使用下面的方法 <link rel="stylesheet" href="http ...

  5. Bootstrap标签页(Tab)插件

    标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法 您 ...

  6. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  7. selenium WebDriver 对浏览器标签页的切换

    关于selenium WebDriver 对浏览器标签页的切换,现在的市面上最新的浏览器,当点击一个链接打开一个新的页面都是在浏览器中打开一个标签页,而selenium只能对窗口进行切换的方法,只能操 ...

  8. 标签页的切换方法（DOM）

    效果: 1.点击“JAVA语言” 2.点击“C语言” 3.点击C++语言 代码: <!doctype html> <html> <head> <meta ch ...

  9. 在QMainWindow中利用多个QDockWidget构成标签页tab（原创）

    功能描述: 在QMainWindow下,使用多个QDockWidget构成可切换,可拖动,可关闭的标签页:标签页的切换由相关联的QAction触发. 实现效果: 代码如下: QDockWidget * ...

随机推荐

  1. BP神经网络与Python实现

    人工神经网络是一种经典的机器学习模型,随着深度学习的发展神经网络模型日益完善. 联想大家熟悉的回归问题, 神经网络模型实际上是根据训练样本创造出一个多维输入多维输出的函数, 并使用该函数进行预测, 网 ...

  2. lastIndexOf() 找出指定元素出现的所有位置（返回的是下标数组）---lastIndexOf() 这个方法是倒叙查找，正序的是indexOf()

    var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.las ...

  3. XSLT 创建CDATA节点

    创建文本结点 (1)直接写入文本: text1 (2)通过<xsl:text>创建文本结点: <xsl:text>text2</xsl:text> (3)通过< ...

  4. 私活利器，docker快速部署node.js应用

    http://cnodejs.org/topic/53f494d9bbdaa79d519c9a4a 最近研究了几天docker的快速部署,感觉很有新意,非常轻量级和方便,打算在公司推广一下,解放运维, ...

  5. 人工智能为什么选择Python语言？

    作为新手,在面对广泛应用于企业级应用开发的 Java.游戏客户端开发的 C++.嵌入式开发的 C.人工智能领域的 Python 等数百种编程语言时,你会如何选择自己的第一门编程语言? 作者 | JAC ...

  6. python,opencv,imread,imwrite,存储，读取图像像素不一致，这种情况是label使用jpg格式

    最近在做图像分割,需要使用一些分割图片的label,但是发现存储的分割label感觉被平滑过了,即使使用 image = cv2.imread(info['path'],cv2.IMREAD_UNCH ...

  7. EasyUI datagrid单元格文本超出显示省略号，鼠标移动到单元格显示文本

    nowrap : true;  是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...

  8. Ueditor 前后端分离实现文件上传到独立服务器

    关于Ueditor 前后端分离实现文件上传到独立服务器,在网上搜索确实遇到大坑,不过还好遇到了 虚若影 最终实现了,在此感谢!虚若影的原文博客网址:http://www.cnblogs.com/hpn ...

  9. jenkins shell部署

    jenkins执行shell脚本 jenkins执行shell 上一篇说的是jenkins+svn+maven把war包自动部署到Tomcat,这篇是从SVN上拉取代码maven生成jar文件,并且拷 ...

  10. django by example 第五章 No module named 'sorl-thumbnail'

    描述:按照原书在settings的installed apps中加入sorl-thumbnail后同步数据库显示No module named 'sorl-thumbnail' 解决方案: 根据官方文 ...