Bootstrap插件tab源码的学习

最新推荐文章于 2022-01-04 17:47:13 发布

原创

最新推荐文章于 2022-01-04 17:47:13 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细解析了Bootstrap Tab插件的使用方法和内部工作原理，包括核心思路、Plugin入口、结构和方法分析。通过示例说明如何创建Tab区和Content区，并探讨了激活Tab的逻辑，以及如何实现过渡效果。最后，总结了Plugin的优势和关键技巧，如事件触发、元素查找和状态管理。

使用方法

可以分为Tab区和Content区。

Tab区为<ul>列表，要求带有"nav nav-tabs"或"nav nav-pills"两种类名。<li>下的<a>标签要求带有data-toggle="tab"属性，可以通过data-target或href指定对应的Content
Content区要求带有"tab-content"类名，每个面板要求有"tab-pane"类名以及Id（即Tab里指定的target）
- 如果"tab-pane"都上加上fade的类名（第一个需要额外再加上"in"，使他显示出来）。配合transition.js就能有过渡效果

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane active" id="home">
    <p>Home Content</p>
  </div>
  <div class="tab-pane" id="profile">
    <p>Profile Content</p>
  </div>
</div>