bootstrap选项卡使用方法解析
选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项,能切换出对应的内容 Bootstrap框架中的选项卡主要有两部分内容组成: 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示. <div id="myTabContent" class="tab-content"> <div class="tab-pane" id="rule">规则内容面板 <div class="tab-pane" id="forum">论坛内容面板 <div class="tab-pane" id="security">安全内容面板 <div class="tab-pane" id="welfare">公益内容面板 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"> 选项卡–选项卡的结构一个选项卡主要包括两个部分,其一是菜单项,其二是内容面板。 关键一点,选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。 对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的: css源码: .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
选项卡–触发切换效果选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求: 1、选项卡导航链接中要设置 data-toggle=”tab” 2、并且设置 data-target=”对应内容面板的选择符(一般是ID)”; 如果是链接的话,还可以通过 href=”对应内容面板的选择符(一般是ID)” 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配。 选项卡–为选择卡添加fade样式为了让面板的隐藏与显示在切换的过程效果更流畅,可以在面板中添加类名 fade,让其产生渐入的效果。 在添加 fade 样式时,最初的默认显示的内容面板一定要记得加上 in 类名,不然其内容用户无法看到 选项卡–胶囊式选项卡(nav-pills)在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外,还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle=”tab”换成data-toggle=”pill”。 选项卡–JavaScript触发方法在每个链接的单击事件中调用tab(“show”)方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的 data-toggle=”tab” 或 data-toggle=”pill” 的属性,然后通过下面的脚本来调用: 实例 :
<ul id="myTab2" class="nav nav-tabs" role="tablist"> 下文查看 如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |