Bootstrap 标识页

2021-01-22 02:42

标识页（Tab）在 Bootstrap 导航栏原素 一章中介公司绍过。根据融合一些 data 特性，您能够轻轻松松地建立一个标识页页面。根据这一软件您能够把內容置放在标识页或是是胶囊式标识页乃至是往下拉莱单标识页中。

假如您要想独立引入该软件的作用，那麼您必须引入 tab.js。或是，如同 Bootstrap 软件概览 一章中常提及，您能够引入 bootstrap.js 或缩小版的 bootstrap.min.js。

您能够根据下列二种方法开启标识页：

根据 data 特性：您必须加上 data_toggle="tab" 或 data_toggle="pill" 到锚点链接连接中。

加上 nav 和 nav_tabs 类到 ul 中，可能运用 Bootstrap 标识款式，加上 nav 和 nav_pills 类到 ul 中，可能运用 Bootstrap 胶囊款式式。

  li a href="#identifier" data_toggle="tab" Home /a /li 
 ...
 /ul 

根据 JavaScript：您可使用 Javascript 来开启标识页，以下所显示：

$('#myTab a').click(function (e) {
 e.preventDefault()
 $(this).tab('show')

下边的案例演试了以不一样的方法来激话每个标识页：

// 根据名字选择标识页
$('#myTab a[href="#profile"]').tab('show')
// 选择第一个标识页
$('#myTab a:first').tab('show')
// 选择最终一个标识页
$('#myTab a:last').tab('show')
// 选择第三个标识页（从 0 刚开始数据库索引）
$('#myTab li:eq(2) a').tab('show')

淡入渐隐实际效果

假如必须为标识页设定淡入渐隐实际效果，请加上 .fade 到每一个 .tab_pane 后边。第一个标识页务必加上 .in 类，便于淡入显示信息原始內容，以下面案例所显示：

 div 
  div id="home" ... /div 
  div id="svn" ... /div 
  div id="ios" ... /div 
  div id="java" ... /div 
 /div 

下边的案例演试了应用 data 特性的标识页（Tab）软件以及淡入渐隐的实际效果：

ul id= myTab > 试着一下 »

結果以下所显示：

.$().tab：该方式能够激话标识页原素和內容器皿。标识页必须用一个 data_target 或是一个偏向 DOM 中器皿连接点的 href。

 ul id="myTab" 
  li a href="#identifier" data_toggle="tab" Home /a /li 
 .....
 /ul 
 div 
  div id="home" ... /div 
 .....
 /div 
 script 
 $(function () {
 $('#myTab a:last').tab('show')
 })
 /script 

下边的案例演试了标识页（Tab）软件方式 .tab 的使用方法。在本案例中，第二个标识页 iOS 是激话的：

ul id= myTab '#myTab li:eq(1) a').tab('show'); /script 试着一下 »

結果以下所显示：

恶性事件叙述案例 show.bs.tab该恶性事件在标识页显示信息时开启，可是务必在国家免检产品签页被显示信息以前。各自应用 event.target 和 event.relatedTarget 而定位到激话的标识页和前一个激话的标识页。

$('a[data_toggle="tab"]').on('show.bs.tab', function (e) {
 e.target // 激话的标识页
 e.relatedTarget // 前一个激话的标识页

shown.bs.tab该恶性事件在标识页显示信息时开启，可是务必在某一标识页早已显示信息以后。各自应用 event.target 和 event.relatedTarget 而定位到激话的标识页和前一个激话的标识页。

$('a[data_toggle="tab"]').on('shown.bs.tab', function (e) {
 e.target // 激话的标识页
 e.relatedTarget // 前一个激话的标识页

下边的案例演试了标识页（Tab）软件恶性事件的使用方法。在本案例中，将显示信息当今和前一个浏览过的标识页：

p 'a[data_toggle= tab ]').on('shown.bs.tab', function (e) { // 获得已激话的标识页的名字 var activeTab = $(e.target).text(); // 获得前一个激话的标识页的名字 var previousTab = $(e.relatedTarget).text(); $( .(activeTab); $( .(previousTab); /script 试着一下 »

結果以下所显示：