bootstap的初体验-05选项卡组件的使用

最新推荐文章于 2025-11-17 00:05:44 发布

原创最新推荐文章于 2025-11-17 00:05:44 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

bootstrap

8 篇文章

订阅专栏

本文详细介绍了选项卡组件的实现方式，包括HTML结构定义和交互逻辑。通过实例代码展示了如何使用ul、li和div来构建选项卡和面板，并解释了data-toggle属性的作用。

选项卡是一个比较常见的组件，在很多网站都有使用。学了一下，感觉东西有点多。

选项卡从界面上讲分为两个部分，上面的是选项卡，下面的是面板。选项卡部分用ul和li定义，而面板部分用div定义。如下代码所示：

<!-- 这是选项卡 -->
<ul class="nav nav-tabs">
  <li><a href="#pan1" data-toggle="tab">博客</a></li>
  <li><a href="#pan2" data-toggle="tab">视频</a></li>
  <li><a href="#pan3" data-toggle="tab">游戏</a></li>
  <li><a href="#pan4" data-toggle="tab">联系我</a></li>
</ul>
<!-- 这是面板 -->
<div class="tab-content">
  <div class="tab-pane active" id="pan1">
    这是我的博客
  </div>
  <div class="tab-pane" id="pan2">
    这是我的视频
  </div>
  <div class="tab-pane" id="pan3">
    这是我的游戏
  </div>
  <div class="tab-pane" id="pan4">
    这是我的联系方式
  </div>
</div>

选项卡和面板通过超链接的href关联起来。

要响应鼠标选择不同的选项卡事件，需要在每个选项卡的超链接里设定data-toggke属性值。因为这里是nav-tabs型选项卡，所以这里的data-toggle值设定为"tab"。

效果如下图