自分は縦に並んでいるメニューもタブにして実装しようとしたのですが、うまく動作せず、サンプルも見つけられなかったので相談する次第です。宜しくお願いします。
なお、本件を実装するのにjQueryを使用しても構いませんが、jQuery Mobileは使用しないでください。
宜しくお願いいたします。
No.1
595
351
100pt
「Togglable tabs」を使って実現してみました。
各メニューのリンク先「href」の値と対応するタブコンテンツの「id」を揃えると動作すると思います。
・Togglable tabs (JavaScript · Bootstrap)
http://getbootstrap.com/javascript/#tabs
・HTML
213
202
<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-->
1
1
1
お忙しい中、詳細にコードを記載頂きありがとうございます。
2015/04/17 09:25:05週末試してみたいと思います！
週末対応しようかと思ったのですが、週末試せなくなったので、一旦ベストアンサーにしたいと思います。
2015/04/19 13:56:01ありがとうございました。