ブートストラップタブ - hrefリンクによるタブのトリガー（タブ自体に当たることに加えてタブビューをトリガーする方法）

Question

私のウェブサイトのプロジェクトセクションでは、それらをタブでレイアウトしています。各プロジェクトの画像を含む小さなカードを表示する概要タブがあります。プロジェクトカードをクリックすると、それぞれのタブで「アクティブ」になる機能を有効にしたいと思います。

私は私のプロジェクトカードのdivに次のように設定することで、タブのフォーマットをコピー：

<a href="#Tab_Content_ID" data-toggle="tab" role="tab"> 
    <div id="Project_Image"></div> 
</a> 

私はそのプロジェクトのタブの開口部をトリガすることができています。ただし、タブ自体（タブのナビゲーションバー内）は選択されていません。概要タブは選択されたまま（アクティブ）なので、別のプロジェクトタブをクリックしてから概要タブに戻ることなく、概要に戻ることはできません。

どうすればこの問題を解決できますか？

プロジェクトlink これは現在のライブバージョンです。まだテスト中であるため、私が行った変更は反映されません。ここにリンクするだけで、私が何を話しているのかを視覚的に知ることができます。

関連するプロジェクトセクションHTML link 画像が1つも表示されないため、コードペインに投稿できません。

Answer 1

いいえ誰もこれを読んでくれるのではないかと疑いますが、私はそれを自分で解決しました。これは私のIDシステムに固有のものですが、ここに行くのです

各タブは、ナビゲーションタブバーの順序付けられていないリストのリスト項目です。これは、「アクティブ」クラスがTAB自体ではなくLIST項目に配置されるため、重要です。

各タブのコンテンツには、「Project-Tab」というタイトルのIDがあります。ここで、Projectは特定のプロジェクトの名前です。

それぞれのタブは、そのタブのコンテンツにIDを付けてリンクします（「href」）。私は「project」というタイトルを付けました。ここで、projectは特定のプロジェクトの名前です。

は今、私はタブのコンテンツにリンクされていることを「プロジェクトカード」のそれぞれの私の概要のセクションで、私はここでその説明を「Overview_Tab」

をクラスを追加した解決策は

$('.Overview_Tab').click(function(){ 

/* Gets the href of the clicked "project card" which is a link to the tab 
    content for that project. I then concatenate '-Tab' onto the end to get the 
    id of the associated tab (as explained above) */ 

    var target = $(this).attr('href')+'-Tab'; 

// Get the parent (the list item containing that tab div) this is where 
    "active" needs to be placed 

    var target_parent = $(target).parent(); 

// Remove the active class on the overview tab 
    $('#Overview-Tab').parent().removeClass('active'); 

// Add active class to the target parent 
    target_parent.addClass('active'); 

}); 

ですですから、これを一般化するには、タブIDの末尾に '-Tab'を追加するだけで、タブIDとタブコンテンツIDを同じにします。

タブを複製する要素に追加する任意のクラス名を選択します（「Overview_Tab」を選択しましたが、HTMLとJS関数の間で一致する限り何でも置くことができます）