Question

我正在尝试使用引导选项卡单击功能，但是我也遇到了麻烦，我还使用了来自stackoverflow的锚标记动画。似乎点击功能正在搞乱选项卡的点击功能是否有办法解决这个问题？

:after

的Javascript

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

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

Anchor Transition与Tabs的Bootstrap单击功能冲突

2 个答案: