Bootstrap实现标签页效果

来源：互联网发布：一流演员知乎编辑：程序博客网时间：2024/06/04 23:41

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下载地址

0 0