引导选项卡 - 通过href链接触发选项卡（除了触及选项卡本身外，如何触发选项卡视图）

问题描述：

对于我的网站上的我的项目部分，我已将它们放在选项卡中。我有一个概览选项卡，显示每个项目的图像的小卡片。我想启用一个功能，点击项目卡片将使相应的选项卡“激活”。引导选项卡 - 通过href链接触发选项卡（除了触及选项卡本身外，如何触发选项卡视图）

我通过设置复制的标签的格式在我的项目卡的div如下：

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

我能够触发该项目的标签开幕。但是，选项卡本身（在选项卡导航栏中）未被选中。 “概览”选项卡仍处于选中状态（活动状态），因此，用户无需先单击另一个项目选项卡，然后返回概览选项卡即可返回概览。

我该如何解决这个问题？

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

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

答

好吧我怀疑有人会读这个，但我自己解决了。现在公平地说，这对我的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的函数之间的匹配，你可以，只要把任何东西在那里）

元素任何类名

引导选项卡 - 通过href链接触发选项卡（除了触及选项卡本身外，如何触发选项卡视图）

相关推荐