沃梦达 / 编程技术 / 前端开发 / 正文

Bootstrap标签页（Tab）插件使用方法

前端开发
2023-12-01

首先让我们来了解一下Bootstrap标签页（Tab）插件。

首先让我们来了解一下Bootstrap标签页（Tab）插件。

Bootstrap标签页插件可以将一组内容分割成可被轮流点击的视图块，并且只显示当前选择的视图块。这非常适合在比较繁琐的页面中展示多个内容模块。

使用步骤

步骤1. 引入Bootstrap插件和样式文件

在head标签中引入Bootstrap插件和样式文件。可以选择本地文件或使用cdn链接。

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<!-- 引入必需的Javascript文件 -->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

步骤2. HTML结构

在HTML文件中，使用ul元素作为导航栏，每个li元素作为一个链接，链接到一个特定的文本块。为每个链接创建一个唯一的标识符，并将其与相应的文本块相关联。可以添加任何有效的HTML标记作为文本块内容。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">简介</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">联系方式</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p>这是首页的内容。</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p>这是简介的内容。</p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <p>这是联系方式的内容。</p>
  </div>
</div>

步骤3. 添加JavaScript代码

在脚本标签中，使用JavaScript代码初始化标签页插件。

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

示例

示例1

在这个示例中，我们将演示如何创建一个含有4个选项卡的标签页，并在选项卡中插入图片和文本。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 标签页插件示例1</title>

  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

  <!-- 引入必需的Javascript文件 -->
  <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

</head>
<body>

  <div class="container mt-5">

    <h2>选项卡页面</h2>

    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">简介</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">联系方式</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="help-tab" data-toggle="tab" href="#help" role="tab" aria-controls="help" aria-selected="false">帮助</a>
      </li>
    </ul>

    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <h3>首页内容</h3>
        <img src="https://cdn.pixabay.com/photo/2015/09/20/02/08/mobile-phone-949251_960_720.jpg" alt="手机图片" class="img-fluid">
        <p>这是首页的内容，这个选项卡将会默认打开。</p>
      </div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <h3>简介内容</h3>
      <img src="https://cdn.pixabay.com/photo/2017/03/31/16/56/phone-2198776_960_720.jpg" alt="手机图片" class="img-fluid">
      <p>这是简介的内容。</p>
      </div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <h3>联系方式</h3>
      <img src="https://cdn.pixabay.com/photo/2015/08/27/08/54/mobile-phone-909857_960_720.jpg" alt="手机图片" class="img-fluid">
      <p>这是联系方式的内容。</p>
      </div>
      <div class="tab-pane fade" id="help" role="tabpanel" aria-labelledby="help-tab">
      <h3>帮助内容</h3>
      <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/smartphone-690622_960_720.jpg" alt="手机图片" class="img-fluid">
      <p>这是帮助的内容。</p>
      </div>
    </div>

  </div>

</body>
</html>

示例2

在这个示例中，我们将演示如何使用垂直选项卡结束创建一个包含3个选项卡的标签页。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 标签页插件示例2</title>

  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

  <!-- 引入必需的Javascript文件 -->
  <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

</head>
<body>

  <div class="container mt-5">

    <h2>垂直选项卡页面</h2>

    <div class="row">

      <div class="col-md-3">

        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
          <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</a>
          <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">简介</a>
          <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">联系方式</a>
        </div>

      </div>

      <div class="col-md-9">

        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
            <h3>首页内容</h3>
            <img src="https://cdn.pixabay.com/photo/2015/09/20/02/08/mobile-phone-949251_960_720.jpg" alt="手机图片" class="img-fluid">
            <p>这是首页的内容，这个选项卡将会默认打开。</p>
          </div>
          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
          <h3>简介内容</h3>
          <img src="https://cdn.pixabay.com/photo/2017/03/31/16/56/phone-2198776_960_720.jpg" alt="手机图片" class="img-fluid">
          <p>这是简介的内容。</p>
          </div>
          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
          <h3>联系方式</h3>
          <img src="https://cdn.pixabay.com/photo/2015/08/27/08/54/mobile-phone-909857_960_720.jpg" alt="手机图片" class="img-fluid">
          <p>这是联系方式的内容。</p>
          </div>
        </div>

      </div>

    </div>

  </div>

</body>
</html>

希望这份攻略对你有所帮助！

本文标题为：Bootstrap标签页（Tab）插件使用方法

上一篇： 关于JavaScript命名空间的一些心得
下一篇： 使用JS location实现搜索框历史记录功能

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2