Twitter Bootstrap选项卡双击问题//选项卡内容中的锚标记问题答案

【问题标题】：Twitter Bootstrap Tabs double click issue // Anchor Tag within tab content IssueTwitter Bootstrap选项卡双击问题//选项卡内容中的锚标记问题
【发布时间】：2016-12-14 15:01:10
【问题描述】：

简介： 这个 html 页面有 3 个部分。引导选项卡作为图像（顶部）单击时应滚动到选项卡式内容。在每个选项卡标签内容中，您都有一个（中间）部分，其中包含价格范围，它将过滤下面的产品块（底部）。

问题 #1 设置锚标签时，单击选项卡应向下滚动到选项卡式内容。问题：单击选项卡时，锚标记滚动仅适用于第一个选项卡。

问题 #2 双击选项卡时，选项卡式内容消失。错误？

代码：http://www.bootply.com/jasonethedesigner/YbdSPgyAb5#

【问题讨论】：

标签： jquery twitter-bootstrap tabs anchor scrollspy

【解决方案1】：

我不知道您为什么要从选项卡窗格中删除活动课程并试图添加到当前的，Bootstrap 正在这样做自动。
问题#1：如果你想这样做，你必须改变你的index 变量值，因为它总是返回 0，这就是您的选项卡窗格在第二次单击时消失的原因，您必须使用父级上的index() 函数（li 元素）：

var index = jQuery(this).parent().index() - 1;

问题 #2： 它应该滚动，但它不会滚动，因为当你点击第二个或第三个标签时，它们有 display: none 所以浏览器不知道在哪里滚动，你可以在你的点击事件：

var target = jQuery($(this).attr('href'));
setTimeout(function() {
  jQuery('html,body').animate({
    scrollTop: jQuery(target).offset().top
  }, 'slow');
}, 50);

BOOTPLY

【讨论】：

感谢您的快速回复。根据您对问题一的回复，我与此客户站点 (Magento) 上使用的脚本之一发生冲突，这有助于作为一种解决方法（快速修复）。
嗯，没问题；）
我不敢相信我错过了……呃。谢谢你。这是零售界忙碌的一周。让我试一试。

【解决方案2】：

对于问题 #2：这是因为display: none 的第二个和第三个标签！您可以使用display: block 在标签顶部创建一个 div，并在单击标签后将其设置为滚动目标。

【讨论】：