这是我在学习课程Tab选项卡切换效果时做的总结和练手。
原课程中只有原生js实现，jquery和bootstrap实现是我自己补上的。
本节内容- 标签页（tab）切换的原生js实现
- 标签页（tab）切换的jquery实现
- 标签页（tab）切换的bootstrap实现
说明：
- 代码是我自己写的，与课程中的不一样。
- 主要利用display:none来把部分内容隐藏而显示其它内容。
- 遇到了事件的循环绑定，我是利用添加id使其成为钩子来解决的。
代码：
tab切换
*{
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;
}
公告
规则
论坛
安全
颠覆式创新
旗舰来了
全国首测
千年一遇
司机高速
北欧村名
高校老师
公安工作组
百度贴吧
哈尔滨
麦当劳
光头哥
经纪人
以上处于
国足领队
国务院
标签页（tab）切换的jquery实现
说明：
-
效果其实和原生js实现是一样的。
- 因为我想写一下jquery代码练练手，所以只是把原生js实现中的js代码改成了jquery的形式。
代码：
tab切换
*{
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;
}
公告
规则
论坛
安全
颠覆式创新
旗舰来了
全国首测
千年一遇
司机高速
北欧村名
高校老师
公安工作组
百度贴吧
哈尔滨
麦当劳
光头哥
经纪人
以上处于
国足领队
国务院
标签页（tab）切换的bootstrap实现
说明：
- 代码中不需要额外写js，只需引用jquery和bootstrap文件即可。
- 虽然不需要写js，但是缺点是需要点击，并且鼠标离开后回复原状，解决这些问题的话需要写js。
- 虽然bootstrap看起来很华丽，而且很简便。但是在一些小改动上面很麻烦，而且会踩很多坑。所以如果需要细致并且频繁修改网站的话，不建议用bootstrap搭建网站。
- 踩坑记录：box-sizing 属性的content-box和border-box（其实这也是盒模型的基本）。
代码：
tab切换
*{
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;
}
公告
规则
论坛
安全
颠覆式创新
旗舰来了
全国首测
千年一遇
司机高速
北欧村名
高校老师
公安工作组
百度贴吧
哈尔滨
麦当劳
光头哥
经纪人
以上处于
国足领队
国务院
