javascript - anchor 转换与选项卡的 Bootstrap 单击功能冲突

Question

我正在尝试使用引导选项卡单击功能，但我在使用从 stackoverflow 获得的 anchor 标记的动画时遇到了问题。似乎单击功能弄乱了选项卡的单击功能有没有办法解决这个问题？

<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>

Javascript

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