1.标签式导航
在<ul>无序列表中添加 .nav nav-tabs 第一个<li>默认是选中状态
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">house1</a></li>
<li><a href="#">house2</a></li>
</ul>
2.设置标签页对应的内容随标签的切换而更改
1.在<li>中加入 data-toggle="tab" href="#home" href中存放对应tab的ID
2.下面插入一个带有 .tab-contant的 div
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标签页与胶囊式标签页</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#house1">house1</a></li>
<li><a data-toggle="tab" href="#house2">house2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>home页</h3>
</div>
<div id="house1" class="tab-pane fade ">
<h3>house1页</h3>
</div>
<div id="house2" class="tab-pane fade ">
<h3>house2页</h3>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">house1</a></li>
<li><a href="#">house2</a></li>
</ul>
</body>
</html>
扫一扫
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
