teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

動作コード追記

2016/08/26 03:37

投稿

退会済みユーザー
answer CHANGED
@@ -1,4 +1,39 @@
1
1
  HTMLのid属性は、ひとつの文章内で一意でなければならず、重複が許されていません。
2
2
  動かないのはおそらくそれが、原因かと思います。
3
3
 
4
+ 削除:
4
- 複数のタブをコントロールしたいのであれば、javascriptなどでタブ押下時に複数のコンテンツを切り替える処理を実装する必要があると思います。
5
+ 複数のタブをコントロールしたいのであれば、javascriptなどでタブ押下時に複数のコンテンツを切り替える処理を実装する必要があると思います。
6
+
7
+ 追記:
8
+ `data-target`を用いれば動くみたいです。
9
+ ```HTML
10
+ <ul class="nav nav-pills" id="right-tab">
11
+ <li class="active"><a href="#tab1" data-target="#tab1, #tab11" data-toggle="tab">Home</a></li>
12
+ <li><a href="#tab2" data-target="#tab2, #tab12" data-toggle="tab">Contents</a></li>
13
+ <li><a href="#tab3" data-target="#tab3, #tab13" data-toggle="tab">Messages</a></li>
14
+ </ul>
15
+
16
+ <div class="main tab-content">
17
+ <div class="tab-pane active" id="tab1">
18
+ <p>tab1</p>
19
+ </div>
20
+ <div class="tab-pane" id="tab2">
21
+ <p>tab2</p>
22
+ </div>
23
+ <div class="tab-pane" id="tab3">
24
+ <p>tab3</p>
25
+ </div>
26
+ </div>
27
+ <!-- 追加 -->
28
+ <div class="other tab-content">
29
+ <div class="tab-pane active" id="tab11">
30
+ test1
31
+ </div>
32
+ <div class="tab-pane" id="tab12">
33
+ test2
34
+ </div>
35
+ <div class="tab-pane" id="tab13">
36
+ test3
37
+ </div>
38
+ </div>
39
+ ```