###前提・実現したいこと
「元のソースコード」のようにしてBootstrapのタブを使用しています。
しかし画面の遷移のしやすさのことを考慮して、「追加後のソースコード」のようにコードを追加し、タブを以外のボタンをクリックしても画面が遷移するようにしました。
しかし、ここで一つ問題が発生しました。
普通にid="right-tab"内のタブをクリックすると何も問題なく画面の表示が切り替わるのですが、
class="btn-transition"内の<a>をクリックすると、画面の表示は切り替わるのですが、id="right-tab"内のタブがactive状態になりません。当たり前といえば当たり前なのかもしれませんが、どのボタンをクリックしても対応するタブがactive状態になるようにしたいです。
jQueryでタブのclassにactiveを追加したり消したりすれば実現はできるのでしょうが、極力HTMLないで完結させたいと考えています。
何か良い方法はございませんでしょうか?
ご回答をいただけると助かります。
###元のソースコード
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</ul> 5 6<div class="main tab-content"> 7 <div class="tab-pane active" id="tab1"> 8 <p>tab1</p> 9 </div> 10 <div class="tab-pane" id="tab2"> 11 <p>tab2</p> 12 </div> 13</div>
###追加後のソースコード
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</ul> 5 6<div class="main tab-content"> 7 <div class="tab-pane active" id="tab1"> 8 <p>tab1</p> 9 <!-- ここから追加 --> 10 <div class="btn-transition"> 11 <a id="to-tab2" data-toggle="tab" href="#right1">タブ2へ進む</a> 12 </div> 13 <!-- ここまで追加 --> 14 </div> 15 <div class="tab-pane" id="tab2"> 16 <p>tab2</p> 17 </div> 18</div>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/28 07:47