锚过渡与选项卡的Bootstrap单击功能冲突

Question

我正在尝试使用引导程序选项卡单击功能，但是在将动画用于从stackoverflow获得的锚标签时遇到了麻烦。 似乎单击功能使选项卡的单击功能搞砸了。有没有解决的办法？

<div id="tab1">
    <ul class="tab1-titles">
        <li class="active">
            <a href="#1a" data-toggle="tab">Tab1</a>
        </li>
        <li>
            <a href="#2a" data-toggle="tab">Tab2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="1a">
            <ul>
               <li>list-item-1</li>
               <li>list-item-2</li>
            </ul>
        </div>
        <div class="tab-pane active" id="2a">
            <ul>
               <li>list-item-1</li>
               <li>list-item-2</li>
            </ul>
        </div>
    </div>
</div>

Java脚本

$(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;
  }
}
});
});

Answer 1

无需添加新的click事件处理程序，只需使用如下所示的内置选项卡更改事件

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var hash = $(e.target).attr("href");

    //your code goes here
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(hash);
        target = target.length ? target : $('[name=' + hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    }
});

Answer 2

我有一个同事替我看了一下，他建议在此脚本中的锚标记中添加一个类。 所以我做到了，并且效果很好！ 我只需要直接调用此功能即可。 他甚至添加了偏移量滚动条，以防万一您在方程式中有固定的标题。

$('a[href^="#"].anchortargets: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: parseInt(target.offset().top) - 140 + 'px'
            }, 500);
            return false;
          }
        }
      });