Twitter Bootstrap 标签双击问题 // 标签内容中的锚标签问题

Question

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

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

第 2 期 双击选项卡时，选项卡内容消失。错误？

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

Answer 1

• 我不知道您为什么要从选项卡窗格中删除活动 class 并尝试添加到当前的，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

Answer 2

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