javascript - Twitter-Bootstrap 3 中的 JS 冲突

Question

所以我在使用一些 JS 时遇到了问题，想知道是否有其他人遇到过这个问题或者可以建议解决方法？

所以我的脚本是为我的 anchor 链接设置动画，以便它们很好地滑动，但它与 Bootstrap 3 轮播的控件相冲突。

$(document).ready(function() {
      $('a[href^="#"]').click(function() {
          var target = $(this.hash);
          if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
          if (target.length == 0) target = $('html');
          $('html, body').animate({ scrollTop: target.offset().top }, 500);
          return false;
      });
  });

轮播上的控件使用轮播名称的 id，因此使用 #，因此它当然会向下导航到轮播，而不是实际切换其中的内容。

<a class="carousel-control left" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
</a>

<a class="carousel-control right" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
</a> 

如有任何建议，我们将不胜感激。

Answer 1

创建任何其他属性来定位 slider 的方向，例如 data-target="#myCarousel"，

并设置链接href="javascript:;"。

<a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
</a>

轮播js脚本:https://github.com/twbs/bootstrap/blob/master/js/carousel.js#L188-L193

这些行应该给出一个总体思路。