Question

对于我网站上的项目部分，我将它们放在标签页中。我有一个概览选项卡，显示包含每个项目图像的小卡片。我想启用一个功能，点击项目卡将激活＆＃34;活动＆＃34;相应的标签。

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

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

我可以触发该项目选项卡的打开。但是，未选中选项卡本身（在选项卡导航栏中）。概览选项卡仍处于选中状态（活动状态），因此用户无需先单击其他项目选项卡，然后返回概览选项卡，就无法返回概览。

我该如何解决这个问题？

项目link 这是该页面的当前实时版本。它没有反映我所做的更改，因为它们仍处于测试阶段。只需链接到这里，您就可以直观地了解我所谈论的内容。

相关项目部分HTML link 我无法在codepen中发布它，因为没有任何图片会显示。

Answer 1

好吧，我怀疑任何人都会读到这个，但我自己解决了。现在公平地说，这在某种程度上与我的身份证系统有关，但这里就是

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

每个标签内容都有一个标题为“Project-Tab”的ID，其中Project是该特定项目的名称。

然后，每个选项卡将（href）链接到该选项卡的内容，并使用我标题为“Project”的ID，其中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相同，只需将“-Tab”添加到标签ID的末尾即可。

选择要添加到复制选项卡的元素的任何类名（我选择了“Overview_Tab”，但只要在HTML和JS函数之间匹配就可以放置任何内容）

Bootstrap选项卡 - 通过href链接触发选项卡（除了命中选项卡本身之外如何触发选项卡视图）

1 个答案: