<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<title></title>
<style>
.tabmenu{
border: 1px solid #ddd; /*设置内容展示块的边框样式*/
border-top: none; /*取消内容展示块是上边框样式*/
border-radius: 0 0 5px 5px; /*设置内容展示块的左下角和右下角为圆角*/
padding: 100px;
}
</style>
</head>
<body>
<!--
作者：百宝箱工作室 微课堂教学QQ：425680248
时间：2018-04-02
描述：制作选项卡
第1步：导航对应的所有内容展示块要放在一个class为tab-content的div里面。
第2步：每一个内容展示块都要加上名为tab-pane的class，默认被选中的导航和对应的内容展示块要加上active样式。
第3步：每一个导航的a标签都要添加data-toggle="tab"属性。
第4步：每一个内容展示块的div都要加上id，用于制作锚点链接。
第5步：每一个导航的a标签都要添加锚点链接，例如href="#menu1"
第6步：设置内容展示块的样式，即tabmenu的样式。
-->
<div class="container">
<div class="row">
<div class="col-lg-6">
<ul class="nav nav-tabs">
<li><a href="#menu1" data-toggle="tab">HTML教学</a></li>
<li class="active"><a href="#menu2" data-toggle="tab">CSS教学</a></li>
<li><a href="#menu3" data-toggle="tab">JavaScript</a></li>
<li><a href="#menu4" data-toggle="tab">美工设计</a></li>
</ul>
<div class="tab-content tabmenu">
<div id="menu1" class="tab-pane">HTML教学内容展示</div>
<div id="menu2" class="tab-pane active">CSS教学内容展示</div>
<div id="menu3" class="tab-pane">JavaScript内容展示</div>
<div id="menu4" class="tab-pane">美工设计内容展示</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
