Question

我有以下代码来启用页面导航的平滑滚动，我只是从我不记得的地方复制粘贴。由于平滑滚动发生在一个锚标签点击，它搞乱了Bootstrap Javascript for Tab，它也使用了锚标签（这就是我的结论，我希望我是正确的）。

$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});
});

现在我不明白代码的$('a[href*="#"]:not([href="#"])')部分，请问有人可以说明这是做什么的吗？另外，如何修复此问题，以便上述功能仅在 On Page锚点击时触发？

Answer 1

a[href*="#"]:not([href="#"])

上面的选择器已经消失了目标 a 标签，其中包含href =“＃smthing”。因此，默认情况下它的效果自动引导选项卡功能。

而不是增加css特异性。 使用类似

的父类

 $(function() {
  $('.myParent a[href*="#"]:not([href="#"])').click(function() {
   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
        return false;
      }
   }
 });
});

平滑滚动javascript代码搞乱Bootstrap Tab代码

1 个答案: