【033】Bootstrap实现标签页效果

zhangchao19890805

已于 2022-05-08 16:39:05 修改

阅读量7.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：标签页

于 2016-07-28 09:42:07 首次发布

本文链接：https://blog.youkuaiyun.com/zhangchao19890805/article/details/52051869

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用Bootstrap 3.3.6和jQuery 1.11.3创建一个简单的标签页组件，通过设置不同的ID和href属性来切换显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版本

Bootstrap v3.3.6
jQuery v1.11.3

实现方法

给显示标签页内容的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下载地址