「ブートストラップ」タブ

Bootstrap Tab プラグイン

Tab は、Bootstrap ナビゲーション要素の章で紹介されています。いくつかのデータ属性を組み合わせることで、タブ付きインターフェイスを簡単に作成できます。このプラグインを使用すると、タブ、カプセルタブ、さらにはドロップダウンメニュータブにコンテンツを配置できます。

このプラグインの機能を個別に参照したい場合は、tab.jsを参照する必要があります。あるいは、ブートストラッププラグインの概要の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。

使用法

タブは 2 つの方法で有効にできます:

データ属性による: data-toggle="tab" または data-toggle="pill" をアンカーに追加する必要があります。テキストリンク。
nav クラスと nav-tabs クラスを ul に追加すると、Bootstrap タブスタイルが適用されます。 nav クラスと nav-pills クラスを ul に追加すると、Bootstrap カプセルスタイルが適用されます。

JavaScript 経由: Javascript を使用して次のようにタブを有効にすることができます:

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

次の例は、各タブをアクティブにするさまざまな方法を示しています:

//次の方法でタブを選択しますname
$('#myTab a[href="#profile"]').tab('show')

//最初のタブを選択
$('#myTab a: first').tab('show' )

//最後のタブを選択します
$('#myTab a:last').tab('show')

//(0 開始インデックスから) 3 番目のタブを選択します
$('#myTab li:eq (2) a').tab('show')

フェード効果

タブページにフェード効果を設定する必要がある場合は、各.tab-paneの後ろに.fadeを追加してください。次の例に示すように、最初のコンテンツをフェードインして表示するには、.in クラスを最初のタブに追加する必要があります。

例

次の例は、data 属性とそのフェードインおよびフェードアウト効果を使用するタブプラグインを示しています。

実行例»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

メソッド

.$().tab

: このメソッドはタブ要素とコンテンツコンテナをアクティブ化できます。タブでは、DOM 内のコンテナーノードを指す

data-target

または

href

を使用する必要があります。 <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#identifier" data-toggle="tab">ホーム</a></li> …..</ul>

.....
</div>
<script>
$(function () {
$('#myTab a:last').tab( 'show ')
})
</script>

例

次の例は、タブプラグインメソッド
.tab

の使用法を示しています。このインスタンスでは、2 番目のタブ

iOS

がアクティブです:

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页（Tab）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
   <li class="active">
      <a href="#home" data-toggle="tab">
         W3Cschool Home
      </a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">Java 
         <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschooolphp中文网是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。php先飞早入行——学的不仅是技术，更是梦想。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
      </p>
   </div>
</div>

</body>
</html>

インスタンスの実行 »

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

イベント

次の表は、Tab プラグインで使用されるイベントのリストです。これらのイベントは関数のフックとして使用できます。

Event	Description	Instance
show.bs.tab	このイベントは、タブが表示されるときにトリガーされますが、新しいタブが表示される前にトリガーされる必要があります。 event.target と event.popularTarget を使用して、それぞれアクティブなタブと前のアクティブなタブをターゲットにします。	<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签页（Tab）插件方法</title> <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab"> W3Cschool Home</a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab"> jmeter</a> </li> <li><a href="#ejb" tabindex="-1" data-toggle="tab"> ejb</a> </li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>W3Cschooolphp中文网是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。php先飞早入行——学的不仅是技术，更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div> <script> $(function () { $('#myTab li:eq(1) a').tab('show'); }); </script> </body> </html>
shown.bs.tab	このイベントはタブが表示されるときにトリガーされますが、タブが表示された後にトリガーされる必要があります。 event.target と event.popularTarget を使用して、それぞれアクティブなタブと前のアクティブなタブをターゲットにします。	$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })

Event

Description

Instance

show.bs.tab

このイベントは、タブが表示されるときにトリガーされますが、新しいタブが表示される前にトリガーされる必要があります。 event.target と event.popularTarget を使用して、それぞれアクティブなタブと前のアクティブなタブをターゲットにします。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页（Tab）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      W3Cschool Home</a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">Java <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">
            jmeter</a>
         </li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">
            ejb</a>
         </li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschooolphp中文网是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。php先飞早入行——学的不仅是技术，更是梦想。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
      </p>
   </div>
</div>
<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

</body>
</html>

shown.bs.tab

このイベントはタブが表示されるときにトリガーされますが、タブが表示された後にトリガーされる必要があります。 event.target と event.popularTarget を使用して、それぞれアクティブなタブと前のアクティブなタブをターゲットにします。

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

例

次の例は、タブプラグインイベントの使用法を示しています。この例では、現在および以前にアクセスしたタブが表示されます:

インスタンス

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})