タブのactive状態を他のボタンから制御する方法

Question

###前提・実現したいこと
「元のソースコード」のようにしてBootstrapのタブを使用しています。
しかし画面の遷移のしやすさのことを考慮して、「追加後のソースコード」のようにコードを追加し、タブを以外のボタンをクリックしても画面が遷移するようにしました。
しかし、ここで一つ問題が発生しました。
普通にid="right-tab"内のタブをクリックすると何も問題なく画面の表示が切り替わるのですが、
class="btn-transition"内の<a>をクリックすると、画面の表示は切り替わるのですが、id="right-tab"内のタブがactive状態になりません。当たり前といえば当たり前なのかもしれませんが、どのボタンをクリックしても対応するタブがactive状態になるようにしたいです。
jQueryでタブのclassにactiveを追加したり消したりすれば実現はできるのでしょうが、極力HTMLないで完結させたいと考えています。
何か良い方法はございませんでしょうか？
ご回答をいただけると助かります。

###元のソースコード

<ul class="nav nav-pills" id="right-tab">
  <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
  <li><a href="#tab2" data-toggle="tab">Contents</a></li>
</ul>

<div class="main tab-content">
  <div class="tab-pane active" id="tab1">
    <p>tab1</p>
  </div>
  <div class="tab-pane" id="tab2">
    <p>tab2</p>
  </div>
</div>

###追加後のソースコード

<ul class="nav nav-pills" id="right-tab">
  <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
  <li><a href="#tab2" data-toggle="tab">Contents</a></li>
</ul>

<div class="main tab-content">
  <div class="tab-pane active" id="tab1">
    <p>tab1</p>
    <!-- ここから追加 -->
    <div class="btn-transition">
      <a id="to-tab2" data-toggle="tab" href="#right1">タブ2へ進む</a>
    </div>
    <!-- ここまで追加 -->
  </div>
  <div class="tab-pane" id="tab2">
    <p>tab2</p>
  </div>
</div>

Answer 1

どんな環境でも動くか保証できませんが、以下のようにすれば当方の環境では動きます。
（動かなかったらごめんなさい）

• id="right-tab"のli要素二つ目にidを追加する。（ここでは、twoとします）
• class="btn-transition"のa要素にdata-target="#tab2,#two"を追加する。

どうやら、data-targetにidがあると、押下時にidの対象要素にclass="active"が追加されるという仕掛けがBootstrapのJavascriptにあるようで、それを使うトリックです。

<ul class="nav nav-pills" id="right-tab">
  <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
  <li id="two"><a href="#tab2" data-toggle="tab">Contents</a></li>
</ul>

<div class="main tab-content">
  <div class="tab-pane active" id="tab1">
    <p>tab1</p>
    <!-- ここから追加 -->
    <div class="btn-transition">
      <a id="to-tab2" data-toggle="tab" href="#tab2" data-target="#tab2,#two">タブ2へ進む</a>
    </div>
    <!-- ここまで追加 -->
  </div>
  <div class="tab-pane" id="tab2">
    <p>tab2</p>
  </div>
</div>

Comments

[tarotarosu]

ご回答を参考にコードを記述したところ、うまく動きました！
Bootstrapが動く仕組みから勉強しなおす必要がありそうですね。。。
ありがとうございました！

Answer 2

BA決まってしまっていますが、検索サイトから来た人のために

https://getbootstrap.com/docs/3.3/javascript/#tabs

Bootstrap tab であればメソッドが用意されています。

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Answer 3

href="#right1"はhref="#tab2"の間違いですよね

極力HTMLないで

元々bootstrapもjavascriptによってタブの制御をしてますから（bootstrapのjsを読みまなければボタンは切り替わらないが表示は切り替わる状態になるとおもいます）、それをjavascript無しでというのは難しいと思います。

ただ、その発端としてbootstrapの暗黙の決め事を利用したくない(classのactiveでactive状態を示すのはbootstrapのルールなのでそれを使いたくない）というのであれば、タブを代わりにクリックしてあげるのではどうでしょう。
以下は、Contentsのタブにidtab2linkを設定して、ページ内の「タブ２へ進む」リンクはjQueryでtab2linkをクリックしてあげるようになっています。

<ul class="nav nav-pills" id="right-tab">
  <li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
  <li><a href="#tab2" data-toggle="tab" id="tab2link">Contents</a></li>
</ul>

<div class="main tab-content">
  <div class="tab-pane active" id="tab1">
    <p>tab1</p>
    <!-- ここから追加 -->
    <div class="btn-transition">
      <a id="to-tab2" onclick="$('#tab2link').trigger('click');return false;">タブ2へ進む</a>
    </div>
    <!-- ここまで追加 -->
  </div>
  <div class="tab-pane" id="tab2">
    <p>tab2</p>
  </div>
</div>

希望に合うかはわかりませんが参考までに。

Comments

[tarotarosu]

ご回答を参考にコードを記述したところうまく動きました！
タブを代わりにクリックしてあげるという発想はなかったので勉強になりました。
ありがとうございました！