您的位置：首页 > Web前端 > BootStrap

Bootstrap实现标签页效果

2016-07-28 09:42 591 查看

1. 版本

Bootstrap v3.3.6

jQuery v1.11.3

2. 实现方法

给显示标签页内容的DIV分别设置上ID： tab_1 和 tab_2。在标签页按钮上的 href 属性设置 #tab_1 和 #tab_2 来控制标签页内容的显示。具体代码如下：

tab.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="bootstrap.css" rel="stylesheet" type="text/css"/>
<style>
.main{
top: 0;
left: 0;
width: 600px;
height: auto;
/*
display、margin-right和margin-left这三行代码使得DIV居中
*/
display: block;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
padding-top:20px;
}
</style>
</head>
<body>
<div class="main">
<!-- begin 导航条 -->
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_1" data-toggle="tab" class="tab-default"> 计算机名 </a>
</li>
<li>
<a href="#tab_2" data-toggle="tab"> 硬件 </a>
</li>
</ul>
<!-- end 导航条 -->
<!-- begin 导航条下方的内容 -->
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
Windows使用以下信息在网络中标识这台计算机
</div>
<div class="tab-pane fade" id="tab_2">
设备管理器
</div>
</div>
<!-- end   导航条下方的内容 -->

<!-- begin 引入依赖的JS文件 -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<!-- end   引入依赖的JS文件 -->
</div>
</body>
</html>

最后给一个jQuery v1.11.3下载地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 标签页

相关文章推荐

新的分享

章节导航