引導選項卡 - 通過href鏈接觸發選項卡（除了觸及選項卡本身外，如何觸發選項卡視圖）

對於我的網站上的我的項目部分，我已將它們放在選項卡中。我有一個概覽選項卡，顯示每個項目的圖像的小卡片。我想啓用一個功能，點擊項目卡片將使相應的選項卡「激活」。引導選項卡 - 通過href鏈接觸發選項卡（除了觸及選項卡本身外，如何觸發選項卡視圖）

我通過設置複製的標籤的格式在我的項目卡的div如下：

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

我能夠觸發該項目的標籤開幕。但是，選項卡本身（在選項卡導航欄中）未被選中。「概覽」選項卡仍處於選中狀態（活動狀態），因此，用戶無需先單擊另一個項目選項卡，然後返回概覽選項卡即可返回概覽。

我該如何解決這個問題？

項目link 這是該頁面的當前實時版本。它並未反映我所做的更改，因爲它們仍在測試中。只需鏈接到這裏，您就可以瞭解我在說什麼。

相關項目部分HTML link 我無法將其發佈在codepen中，因爲沒有圖像會顯示。

來源

2017-04-25 vampiire

好吧我懷疑有人會讀這個，但我自己解決了。現在公平地說，這對我的ID系統來說有點特殊，但是這裏是

每個選項卡都是導航欄的無序列表中的一個列表項。這很重要，因爲「活動」類放置在LIST項目上，而不是TAB本身。

每個標籤內容都有一個標識爲「Project-Tab」的ID，其中Project是該特定項目的名稱。

然後每個選項卡鏈接（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和tabContent ID相同，只需在標籤ID的末尾添加「-Tab」即可。

選擇要添加到正在複製一個選項卡（我撿「Overview_Tab」但因爲它的HTML和JS的函數之間的匹配，你可以，只要把任何東西在那裏）

元素任何類名

來源

2017-04-25 17:37:51 vampiire

引導選項卡 - 通過href鏈接觸發選項卡（除了觸及選項卡本身外，如何觸發選項卡視圖）

回答

相關問題