Question

我为我的问题找到了几个解决方案，但我无法让任何人工作。单击链接时，我试图平滑滚动到选项卡。这非常有效。问题是，当我在页面上有多个指向选项卡的链接时，只有链接有效，其中有一个选项卡处于活动状态。因此，当我点击链接并且该标签未激活时，该链接无法正常工作。

所以我尝试做的是在点击链接时激活标签。

我有什么：

<a class="goSmoothly" href="#" data-target="description" onclick="return false">Link to tab1</a>
<a class="goSmoothly" href="#" data-target="specs" onclick="return false">Link to tab2</a>

<ul class="nav-tabs">
  <li class="active"><a href="#description" data-toggle="tab">Tab1</a></li>
  <li><a href="#specs" data-toggle="tab">Tab2</a></li>
</ul>


$( '.goSmoothly' ).on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');

    $('html, body').animate({
      scrollTop: ($(target).offset().top - 150)
    }, 1200);

    var self = $(this), className = "active";
    self.addClass(className).siblings("."+className).removeClass(className);
  });

Answer 1

问题在于这一部分：

var target = "#" + $(this).data('target');

$('html, body').animate({
  scrollTop: ($(target).offset().top - 150)
}, 1200);

您的$(target)选择器正在选择具有 description 或 specs 的id属性的元素，但是在您的代码中您没有元素有这些ID。相反，您拥有具有href属性的元素，您可以使用以下选项来选择：

var target = $(this).data('target');

$('html, body').animate({
  scrollTop: ($('[href="' + target + '"]').offset().top - 150)
}, 1200);

而不是打电话：

self.addClass(className).siblings("."+className).removeClass(className);

你可以简单地说：

$('.active').removeClass('active');
$(this).addClass('active');

Smoothscroll无法在点击时激活标签

1 个答案: