• はてなアカウントでログイン
• 無料ユーザー登録

みんなの回答

• rouge_20082015/04/14 01:39:36

  満足100pt

  「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-->
  

  スター

  • 

    8件のコメントを見る

  • rouge_2008 2015/04/14 01:49:34

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

    スター

  • くじぇ 2015/04/15 03:06:18

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

    スター

  • rouge_2008 2015/04/15 07:25:05

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

    スター

  • くじぇ 2015/04/16 03:58:28

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

    スター

  • くじぇ 2015/04/16 04:03:40

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

    スター

  • rouge_2008 2015/04/16 22:06:27

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

    スター

  • くじぇ 2015/04/17 09:25:05

    お忙しい中、詳細にコードを記載頂きありがとうございます。
    週末試してみたいと思います！

    スター

  • くじぇ 2015/04/19 13:56:01

    週末対応しようかと思ったのですが、週末試せなくなったので、一旦ベストアンサーにしたいと思います。
    ありがとうございました。

    スター

この質問へのコメント

質問の情報

登録日時

2015-04-13 01:46:47

終了日時

2015-04-20 01:50:05

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• よく女に間違われます。高1男子です。 先日トイレに行きたくなったのでトイレに行こうと思い、男子トイレに…匿名質問者110時間前
• 【ナルコ】 私は医療に関して（当事者ではあるものの）素人です。 友人Aは「ナルコレプシー」的に、話して…SE**.M13時間前
• 今行きがかり上で中小企業を相手に民事訴訟の原告と被告で2件の裁判を抱えています。しかし何も深刻さはな…asnaro_7111日前
• 海外の習慣、民族的なことに詳しい方に質問です。 「玄界灘に生きた人々」という本で、「ダイコン官との旅…匿名質問者23時間前
• 36歳です。卵巣腫瘍疑いで大学病院に10月1日に受診しました。エコーで充実性腫瘍があるから至急MRIと腫瘍マ…ikkuchaan11日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ