Bootstrap 标签页(Tab)插件.pdfVIP

Bootstrap 标签页 （Tab ）插件 Bootstrap 标签页 （Tab ）插件 标签页 （Tab ）在 Bootstrap 导航元素 ⼀章中介绍过。通过结合⼀些 data 属性，您可以 轻松地创 ⼀个标签页界⾯。通过这个插件您可以把内容放置在标签页或者是胶囊式 标签页甚⾄是下拉菜单标签页中。 如果您想要单独引⽤该插件的功能，那么您需要引⽤ tab.j s 。或者， 正如 Bootstrap 插件概览 ⼀章中所提到，您可以引⽤ bootstrap.js 或压缩 版的 bootstrap.min.js。 ⽤法 您可以通过以下两种⽅式启⽤标签页： 通过 data 属性：您需要添加 data-toggle= tab 或 data-toggle= pill 到锚⽂本 链接中。 添加 nav 和 nav-tabs 类到 ul 中，将会应⽤ Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应⽤ Bootstrap 胶囊式样式。 ul class=nav nav-tabs lia href=#identifier data-toggle=tabHome/a/li.. 通过 JavaScript ：您可以使⽤ Javscript 来启⽤标签页，如下所⽰： $(#m Tab a).click(function (e) { e.preventDefault() $(this).tab(show )}) 下⾯的实例演⽰了以不同的⽅式来激活各个标签页： // 通过名称选取标签⻚$(#m Tab a[href=#profile]).tab(show ) // 选取第⼀个标签⻚$(#m Tab a:first).tab(show ) // 选取最后⼀ 淡⼊淡出效果 如果需要为标签页设置淡⼊淡出效果，请添加 .fade 到每个 .tab-pane 后⾯。第⼀个标 签页必须添加 .in 类，以便淡⼊显⽰初始内容，如下⾯实例所⽰： div class=tab-content div class=tab-pane fade in active id=home.../div div class=tab-pane fade id=svn.../div div class=tab-pane fade id=ios.../div div class=tab-pane fade id=java.../div/div 实例 下⾯的实例演⽰了使⽤ data 属性的标签页 （Tab ）插件及其淡⼊淡出的效果： !DOCTYPE htmlhtmlhead titleBootstrap 实例 - 标签⻚ （Tab）插件/title link href=/bootstrap/css/bootstrap.min.css rel=st lesheet script src=/scripts/jquer .min.js/script script src=/bootstrap/js/bootstrap.min.js/script/headb li class=active a href=#home data-toggle=tab W3Cschool Home /a /li lia href=#ios data-toggle=tabiOS/a/li li class=dropdown a href=# id=m TabDrop1 class=dropdown-toggle data-toggle=dropdownJava b class=caret/b /a ul class=dropdown-menu role=menu aria-labelledb =m Tab lia href=#jmeter tabindex=-1 data-toggle=tabjme lia href=#ejb tabindex=-1 data-toggle=tabejb/a /ul /li/uldiv id=m TabContent class=tab-content