人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Bootstrap v3.3.4で質問です。左カラム上へ縦に並んでいるメニューのどれか一つを選択すると、右カラムの内容が変更される。ただし、その中の一つには横に並ぶタブのコンテンツも含まれる。という構造を実装したいので教えて下さい。
自分は縦に並んでいるメニューもタブにして実装しようとしたのですが、うまく動作せず、サンプルも見つけられなかったので相談する次第です。宜しくお願いします。
なお、本件を実装するのにjQueryを使用しても構いませんが、jQuery Mobileは使用しないでください。
宜しくお願いいたします。

●質問者: くじぇ
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●100ポイント

「Togglable tabs」を使って実現してみました。
各メニューのリンク先「href」の値と対応するタブコンテンツの「id」を揃えると動作すると思います。

・Togglable tabs (JavaScript · Bootstrap)
http://getbootstrap.com/javascript/#tabs

・HTML

 <ul class="nav nav-tabs" role="tablist" id="topNavi">
 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
 <li role="presentation"><a href="#members" aria-controls="members" role="tab" data-toggle="tab">Members</a></li>
 <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
 <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
 <div class="tab-content" id="mainContent">
 <div role="tabpanel" class="tab-pane active" id="home">
 <p>Home Content ...<p>
 </div>
 <div role="tabpanel" class="tab-pane" id="members">
 <h2>Members ...</h2>
<ul class="nav nav-tabs" role="tablist" id="membersProfile">
 <li role="presentation" class="active"><a href="#profile1" aria-controls="profile1" role="tab" data-toggle="tab">profile1</a></li>
 <li role="presentation"><a href="#profile2" aria-controls="profile2" role="tab" data-toggle="tab">profile2</a></li>
 <li role="presentation"><a href="#profile3" aria-controls="profile3" role="tab" data-toggle="tab">profile3</a></li>
 </ul>
 <div class="tab-content">
 <div role="tabpanel" class="tab-pane active" id="profile1">
 <p>profile1 ...</p>
 </div>
 <div role="tabpanel" class="tab-pane" id="profile2">
 <p>profile2 ...</p>
 </div>
 <div role="tabpanel" class="tab-pane" id="profile3">
 <p>profile3 ...</p>
 </div>
 </div>

 </div>
 <div role="tabpanel" class="tab-pane" id="messages">
 <p>messages ...</p>
 </div>
 <div role="tabpanel" class="tab-pane" id="settings">
 <p>settings ...</p>
 </div>
 </div>



・javascript

 /* 上記のHTMLのようにタブ(※a要素)に「data-toggle="tab"」を指定している場合は必要ありません。 */
 /* $('#topNavi a, #members a').click(function (e) {
 e.preventDefault();
 $(this).tab('show');
 })*/

 /* タブ切り替えコンテンツを含むタブが非表示になった時に、最初のタブを有効に戻す為の記述
 例では「Members」タブなので、2番目のliが非表示になった際のイベントを利用しています */
 $('#topNavi li:eq(1)').on('hide.bs.tab', function (e) {
 $('#members a:first').tab('show');
 })

※「bootstrap.min.css」または「bootstrap.css」、「jquery.min.js」または「jquery.js」、「bootstrap.min.js」または「bootstrap.js」を使用します。


【※※ 追記 ※※】

offcanvasのメニュー選択でコンテンツ画面を切り替える場合のコードを追記します。(動作のみタブ切り替え風)

 <div class="row row-offcanvas row-offcanvas-left">

<div class="tab-content" id="mainContent"><!-- この行を追加 -->

 <div role="tabpanel" class="col-xs-12 col-sm-9 tab-pane active" id="app"><!-- 一つ目のタブコンテンツ画面 -->
 <p class="pull-left visible-xs">
 <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
 </p>
 <h2>Main Contents ...</h2>
 <ul class="nav nav-tabs" role="tablist" id="appNavi">
 <li class="active"><a href="#app1" aria-controls="app1" role="tab" data-toggle="tab">App1</a></li>
 <li><a href="#app2" aria-controls="app2" role="tab" data-toggle="tab">App2</a></li>
 <li><a href="#app3" aria-controls="app3" role="tab" data-toggle="tab">App3</a></li>
 </ul>
 <div class="tab-content"><!-- 内側のタブコンテンツ画面 -->
 <div role="tabpanel" class="tab-pane active" id="app1">
 <p>app1 ...</p>
 </div>
 <div role="tabpanel" class="tab-pane" id="app2">
 <p>app2 ...</p>
 </div>
 <div role="tabpanel" class="tab-pane" id="app3">
 <p>app3 ...</p>
 </div>
 </div><!--/ #appNavi > .tabcontent-->
 </div><!--/.col-xs-12.col-sm-9 #app-->

 <div role="tabpanel" class="col-xs-12 col-sm-9 tab-pane" id="settings"><!-- 二つ目のタブコンテンツ画面 -->
 <p class="pull-left visible-xs">
 <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
 </p>
 <!-- コンテンツHTML略 -->

 </div><!--/.col-xs-12.col-sm-9 #settings-->

</div><!--/ .tab-content-->

 <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
 <ul class="list-group" id="mainNavi">
 <li class="list-group-item active"><a href="#app" data-toggle="tab">Link</a></li>
 <li class="list-group-item"><a href="#settings" data-toggle="tab">Link</a></li>
 </ul>
 </div><!--/.sidebar-offcanvas-->

 </div><!--/row-->


※「row-offcanvas」classの内側にタブ切り替えコンテンツの親要素を追加します。(※「tab-content」classを指定)
※一つ目のタブパネル に「tab-pane」と「active」classを追加し、任意のid(※ここでは「app」)を指定します。
※offcanvasメニューのトグルボタンは各コンテンツ内に必要です。
※二つ目のタブパネル に「tab-pane」classを追加し、任意のid(※ここでは「settings」)を指定します。
※各メニュー項目の親要素(※「sidebar-offcanvas」classの内側の要素)をdiv要素からul要素に変更します。
※「list-group-item」classはli要素に指定し直します。

 /* タブ切り替えコンテンツを含むタブが非表示になった時に、最初のタブを有効に戻す為の記述
 例では最初のタブなので、1番目のliが非表示になった際のイベントを利用しています */

$('#mainNavi li:eq(0)').on('hide.bs.tab', function (e) {
 $('#appNavi a:first').tab('show');
 })


※offcanvasメニューのCSSを変更する必要があります。
以下でほぼ同じ表示だと思いますが、他にも変更が必要かもしれません。適宜調整してみてください。

 .list-group-item { padding: 0; }
 .list-group-item a {
 display: block;
color: #555;
padding: 10px 15px;
 }
 .list-group-item a:hover,
 .list-group-item a:focus {
 color: #555;
 text-decoration: none;
 background-color: #f5f5f5;
 }
 .list-group-item.active a,
 .list-group-item.active a:hover,
 .list-group-item.active a:focus {
 z-index: 2;
 color: #fff;
 background-color: #337ab7;
 border-color: #337ab7;
 }



【※※ 追記 ※※】

切り替えコンテンツのコードを書く際は、次の点に注意するといいと思います。

・タブで切り替えるコンテンツは「class="tab-content"」を指定した要素で囲む
・タブ切り替えコンテンツには、自身に「class=" tab-pane"」を指定する
・メニュー項目には、 「data-toggle="tab"」を指定する()
・デフォルトのコンテンツやメニューには「active」classを指定する

ドキュメントには次のようにあります。
HTMLサンプルもシンプルなので、そちらで実際に動作確認する方が分かりやすいのではないかと思います。

Markup
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.


一応、タブ切り替えコンテンツ部分のみのコードを記載します。

・HTML例(※offcanvasのメニュー等は省略)

<div class="tab-content" id="mainContent"><!-- タブ切り替えコンテンツのコンテナーに「class="tab-content」を指定 (※idは任意) -->
 <div role="tabpanel" class="tab-pane active" id="app"><!-- 各タブコンテンツ画面に「tab-pane」classを指定、「active」classを指定するとデフォルトで表示、idは対応するメニューの「href」と揃える -->
 <h2>Main Contents ...</h2>
 <ul class="nav nav-tabs" role="tablist" id="appNavi"><!-- タブ表示にするメニューのul要素に「nav」と「nav-tabs」classを指定 (※idは任意ですが、有効タブをjavascriptで戻す際に使用) -->
 <li class="active"><a href="#app1" aria-controls="app1" role="tab" data-toggle="tab">App1</a></li>
 <li><a href="#app2" aria-controls="app2" role="tab" data-toggle="tab">App2</a></li>
 <li><a href="#app3" aria-controls="app3" role="tab" data-toggle="tab">App3</a></li>
 </ul>
 <div class="tab-content"><!-- 内側のタブコンテンツ画面 -->
 <div role="tabpanel" class="tab-pane active" id="app1">
 <p>app1 ...</p>
 </div>
 <div role="tabpanel" class="tab-pane" id="app2">
 <p>app2 ...</p>
 </div>
 <div role="tabpanel" class="tab-pane" id="app3">
 <p>app3 ...</p>
 </div>
 </div><!--/ #appNavi > .tabcontent-->
 </div><!--/#app-->

 <div role="tabpanel" class=" tab-pane" id="settings"><!-- 二つ目のタブコンテンツ画面 -->
 <!-- コンテンツHTML略 -->

 </div><!--/#settings-->

</div><!--/ .tab-content-->

rouge_2008さんのコメント
> 縦に並んでいるメニューもタブにして実装 左カラムのメニューは縦にならぶタブにする必要があったでしょうか?

くじぇさんのコメント
rouge_2008 さんありがとうございます。 > 左カラムのメニューは縦にならぶタブにする必要があったでしょうか? 自分としては、bootstrapで、Webアプリを作りたいと考えています。 そこで縦に並ぶメニューこと offcanvas ( http://getbootstrap.com/examples/offcanvas/ )の選択結果によって、メイン画面と設定画面を切り替えたいと考えました。 そして画面の切り替えには、タブを使うのが良いのではないか?と考えています。 しかし、切り替えたメイン画面でも横に並ぶタブを設けてコンテンツの内容を切り替えるような実装をしようとしたところ、横に並ぶタブは動作しますが、offcanvasで切り替えたいタブが連動しなくて相談した次第です。 共有いただいた Togglable tabs についてまだ理解できていないのですが、自分の場合でも適応できるのか、考えてみます。

rouge_2008さんのコメント
> そこで縦に並ぶメニューこと offcanvas ( http://getbootstrap.com/examples/offcanvas/ )の選択結果によって、メイン画面と設定画面を切り替えたいと考えました。 > そして画面の切り替えには、タブを使うのが良いのではないか?と考えています。 offcanvasで表示されるメニューもタブにしたいという事ですが、コンテンツ画面切り替えの動作がタブ切り替え風であればいいのでしょうか? それともメニューの見た目もタブである必要がありますか? イメージが思い浮かばないのですが、縦並びのタブの場合、各メニュー表示の違いが分かりにくいと思いますし、横並びのタブにする場合、サンプルのデフォルトのoffcanvas画面とは表示サイズに違いがありますので・・・ > 横に並ぶタブは動作しますが、offcanvasで切り替えたいタブが連動しなくて offcanvasのメニュー選択で、画面が切り替わらないという事でしょうか? とりあえずoffcanvasと併用する場合のコードを回答欄に追記します。

くじぇさんのコメント
rouge_2008 さんありがとうございます。 > メニューの見た目もタブである必要がありますか? いえ、その必要はありません。 jQuery Mobileにおいてdata-roleを用いることで、一つのHTML内に複数のページ内容を記述するというのがありますが、 ( http://www.buildinsider.net/web/jquerymobileref/02 ) Bootstrapでも一つのHTMLで複数ページを埋め込んで切り替えられるようにしたい。 その際、各ページ間を移動するメニューにはoffcanvasを使いたい。 なおその第1ページ目には、横に並ぶタブを入れて各コンテンツを切り替えて表示できるようにしたい(ここは見た目もタブにしたい)。 というのが本来やりたいことです。 しかし、Bootstrapではdata-roleに相当するものがなさ気?ですので、代わりにココでもページ全体を覆うタブを用意して、offcanvasと連動するようにしたら近いことができるのかな?と思った次第です。 解答欄は今解析する余力がないので、後日確認します。 重ねてありがとうございます!

くじぇさんのコメント
> jQuery Mobileにおいてdata-roleを用いる 正確には、リンク先にある <div id="ページ名" data-role="page"> 各ページの内容 </div> と言った記述を指します。 よろしくお願い致します。

rouge_2008さんのコメント
jQuery MobileもBootstrapもほとんど知らないのですが、おそらく「Togglable tabs」によるタブ切り替えで大丈夫だと思います。 タブ切り替えコンテンツのコード記述のポイントについては回答欄に追記しました。

くじぇさんのコメント
お忙しい中、詳細にコードを記載頂きありがとうございます。 週末試してみたいと思います!

くじぇさんのコメント
週末対応しようかと思ったのですが、週末試せなくなったので、一旦ベストアンサーにしたいと思います。 ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ