Bootstrap_Javascript_选项卡_html/css

来源：曲格情感

　　选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。

一 . 结构分析

Bootstrap框架中的选项卡主要有两部分内容组成：

选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs

底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示

二. data-toggle触发选项卡(无需JS)

　　声明式触发选项卡需要满足以下几点要求：

　　1、选项卡导航链接中要设置 data-toggle="tab"

　　2、并且设置 data-target="对应内容面板的选择符(一般是ID)";

　　3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。

 公告
 规则
 论坛
 安全
 公益
 公告内容面板 规则内容面板 论坛内容面板 安全内容面板 公益内容面板

三 . JavaScript触发选项卡

　　调用方法:

　　在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容.

HTML:

 公告
 规则
 论坛
 安全
 公益
 公告内容面板 规则内容面板 论坛内容面板 安全内容面板 公益内容面板

JS:

四 . 选项卡样式

　　为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。

　　在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。

 公告内容面板 规则内容面板 论坛内容面板 安全内容面板 公益内容面板