Bootstrap Tabs - 通过 href 链接触发选项卡（除了点击选项卡本身之外，如何触发选项卡视图）答案

【问题标题】：Bootstrap Tabs - trigger tabs by href link (how to trigger tab view in addition to hitting the tab itself)Bootstrap Tabs - 通过 href 链接触发选项卡（除了点击选项卡本身之外，如何触发选项卡视图）
【发布时间】：2017-04-26 01:37:51
【问题描述】：

对于我网站上的项目部分，我将它们布置在选项卡中。我有一个概览选项卡，其中显示带有每个项目图像的小卡片。我想启用一个功能，单击项目卡将使相应的选项卡“活动”。

我通过在我的项目卡 div 上设置以下内容来复制选项卡的格式：

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

我能够触发该项目选项卡的打开。但是，选项卡本身（在选项卡导航栏中）未被选中。概览选项卡仍处于选中状态（活动），因此用户必须先单击另一个项目选项卡，然后再返回概览选项卡，才能返回概览。

我该如何解决这个问题？

项目link 这是该页面的当前实时版本。它没有反映我所做的更改，因为它们仍在测试中。只需在此处链接，您就可以直观地了解我在说什么。

相关项目部分 HTML link 我无法将其发布在 codepen 中，因为不会显示任何图像。

【问题讨论】：

标签： html twitter-bootstrap-3 tabs

【解决方案1】：

好吧，我怀疑有人会读到这个，但我自己解决了。现在公平地说，这有点特定于我的 ID 系统，但这里有

每个选项卡都是导航选项卡栏的无序列表中的一个列表项。这很重要，因为“活动”类放置在 LIST 项而不是 TAB 本身上。

每个选项卡内容都有一个 ID，我将其命名为“Project-Tab”，其中 Project 是该特定项目的名称。

然后每个选项卡链接 (href) 到该选项卡的内容，其 ID 为“项目”，其中项目是该特定项目的名称。

现在，在我已链接到选项卡内容的每个“项目卡”的概述部分中，我添加了一个类“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 函数之间匹配）

【讨论】：