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

下载贤集网APP入驻自媒体

概述这是我在学习课程Tab选项卡切换效果时做的总结和练手。
原课程中只有原生js实现，jquery和bootstrap实现是我自己补上的。本节内容标签页（tab）切换的原生js实现 标签页（tab）切换的jquery实现 标签页（tab）切换的bootstrap实现标签页（tab）切换的原生js实现
说明：代码是我自己写的，与课程中的不一样。 主要利用display:none来把部分内容隐藏而显示其它内容。 遇到了事件的循环绑定，我是利用添加id使其成为钩子来解决的。代码：<!DOCTYPE html>tab切换*{: Times;}#main {: 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;}

	
		
			公告
		
		
			规则
		
		
			论坛
		
		
			安全
		
	
	
		
			颠覆式创新旗舰来了全国首测千年一遇
		
		
			司机高速北欧村名高校老师公安工作组
		
		
			百度贴吧哈尔滨麦当劳光头哥
		
		
			经纪人以上处于国足领队国务院
		
	

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";}}复制代码标签页（tab）切换的jquery实现
说明：
效果其实和原生js实现是一样的。因为我想写一下jquery代码练练手，所以只是把原生js实现中的js代码改成了jquery的形式。代码：<!DOCTYPE html>tab切换*{: Times;}#main {: 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;}

	
		
			公告
		
		
			规则
		
		
			论坛
		
		
			安全
		
	
	
		
			颠覆式创新旗舰来了全国首测千年一遇
		
		
			司机高速北欧村名高校老师公安工作组
		
		
			百度贴吧哈尔滨麦当劳光头哥
		
		
			经纪人以上处于国足领队国务院
		
	

$(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");}})复制代码标签页（tab）切换的bootstrap实现
说明：代码中不需要额外写js，只需引用jquery和bootstrap文件即可。 虽然不需要写js，但是缺点是需要点击，并且鼠标离开后回复原状，解决这些问题的话需要写js。 虽然bootstrap看起来很华丽，而且很简便。但是在一些小改动上面很麻烦，而且会踩很多坑。所以如果需要细致并且频繁修改网站的话，不建议用bootstrap搭建网站。 踩坑记录：box-sizing 属性的content-box和border-box（其实这也是盒模型的基本）。代码：<!DOCTYPE html>tab切换*{: Times;}#main {: 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;}

	
		
			公告
		
		
			规则
		
		
			论坛
		
		
			安全
		
	
	
		
			颠覆式创新旗舰来了全国首测千年一遇
		
		
			司机高速北欧村名高校老师公安工作组
		
		
			百度贴吧哈尔滨麦当劳光头哥
		
		
			经纪人以上处于国足领队国务院
		
	

复制代码