概述
这是我在学习课程Tab选项卡切换效果时做的总结和练手。
原课程中只有原生js实现，jquery和bootstrap实现是我自己补上的。
本节内容
- 标签页（tab）切换的原生
js实现 - 标签页（tab）切换的
jquery实现 - 标签页（tab）切换的
bootstrap实现
标签页（tab）切换的原生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>标签页（tab）切换的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>标签页（tab）切换的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>