###前提・実現したいこと
下記のようにBootstrapを使ってタブの切り替えを行っています。
###もとのソースコード
html
1<ul class="nav nav-pills" id="right-tab"> 2 <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li> 3 <li><a href="#tab2" data-toggle="tab">Contents</a></li> 4 <li><a href="#tab3" data-toggle="tab">Messages</a></li> 5</ul> 6 7<div class="main tab-content"> 8 <div class="tab-pane active" id="tab1"> 9 <p>tab1</p> 10 </div> 11 <div class="tab-pane" id="tab2"> 12 <p>tab2</p> 13 </div> 14 <div class="tab-pane" id="tab3"> 15 <p>tab3</p> 16 </div> 17</div> 18
これでタブの切り替えはうまくいくのですが、これに対して、下記のようなコードを追加し、
id="right-tab"内のタブをクリックした際、class="main"とclass="other"の両方のタブコンテンツを切り替えようとしたのですが、うまくいきませんでした。
idと一対一で対応させていることがうまくタブ切り替えがいかない原因なのでしょうか?
何か解決策がございましたら、ご回答を頂けると助かります_(..)
###追加後のソースコード
html
1<ul class="nav nav-pills" id="right-tab"> 2 <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li> 3 <li><a href="#tab2" data-toggle="tab">Contents</a></li> 4 <li><a href="#tab3" data-toggle="tab">Messages</a></li> 5</ul> 6 7<div class="main tab-content"> 8 <div class="tab-pane active" id="tab1"> 9 <p>tab1</p> 10 </div> 11 <div class="tab-pane" id="tab2"> 12 <p>tab2</p> 13 </div> 14 <div class="tab-pane" id="tab3"> 15 <p>tab3</p> 16 </div> 17</div> 18 19<!-- 追加 --> 20<div class="other tab-content"> 21 <div class="tab-pane active" id="tab1"> 22 test1 23 </div> 24 <div class="tab-pane" id="tab2"> 25 test2 26 </div> 27 <div class="tab-pane" id="tab3"> 28 test3 29 </div> 30</div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/26 03:45