概述

这是我在学习课程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. BOUNDARIES AND SPACE

    BOUNDARIES AND SPACE Review Nice work! You've learned a lot. Let's review the web and CSS concepts c ...

  2. springboot maven 部署

    1.在pom.xml文件中配置tomcat插件 <build> <plugins> <plugin> <groupId>org.springframew ...

  3. python sqlparse 各种 token

    https://blog.csdn.net/qq_39607437/article/details/79620383 import sqlparse def look(statement): prin ...

  4. 【转】IO多路复用机制详解

    高性能IO模型浅析 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking  ...

  5. python基础 ---- 使用pyCharm 调试

    debug -- 为了分析程序的异常 单步调试 1.设置断点 2.debug.启动  3.监控变量

  6. php中对象赋值问题

    今天遇到一个问题, 一开始拼接的SQL语句,然后想多次使用时发现会被重置,然后想到给重新赋值一次,但是发现这样赋值会出问题,百思不得其解,最后经过搜索,发现PHP中对象赋值给一个变量之类的赋值的其实是 ...

  7. 73. Set Matrix Zeroes 把矩阵同一行列的元素都改成0

    ［抄题］: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in-place. ...

  8. Java比较两个时间的前后

    public static int compare_date(String DATE1, String DATE2) { DateFormat df = new SimpleDateFormat(&q ...

  9. 自定义RPC框架--基于JAVA实现

    视频教程地址 DT课堂(原名颜群) 整体思路RPC(Remote Procedure Call),即远程过程调用.使用RPC,可以像使用本地的程序一样使用远程计算机上的程序.RPC使得开发分布式程序更 ...

  10. 编辑linux内核与bosybox 时，make menuconfig 出现错误

    *** Unable to find the ncurses libraries or the *** required header files. *** 'make menuconfig' req ...