Question

不幸的是我无法强行切换标签。

我已经使用过一次代码并且它有效，我使用了相同版本的jQuery和Bootstrap。

我在这里找不到冲突。我的代码中没有相同的ID，据我所知，我的CSS不会覆盖bootstrap CSS。

我使用jQuery 2.1.4和Bootstrap 3.3.4。

代码：

<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      Tutorial Point Home</a></li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li><a href="#jmeter" data-toggle="tab">jmeter</a></li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>tab1 text</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>tab2 text</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>tab3 text</p>
   </div>

</div>
<script>
   $(function(){
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      // Get the name of active tab
      var activeTab = $(e.target).text(); 
      // Get the name of previous tab
      var previousTab = $(e.relatedTarget).text(); 
      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
   });
});
</script>

EDIT 我发现了与标签冲突的代码，它负责平滑滚动：

 <script>
    $(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
        }, 700);
        return false;
      }
    }
  });
});
</script>

有没有办法让它们都起作用？我能改变＃换别的吗？

Answer 1

animate函数中的return false导致问题，因为它永远不会返回以允许Bootstrap选项卡切换为工作。把它改成这个..

$(function(){

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      // Get the name of active tab
      var activeTab = $(e.target).text(); 
      // Get the name of previous tab
      var previousTab = $(e.relatedTarget).text(); 
      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
   });

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

});

演示：http://codeply.com/go/R4VRTQcx46

引导标签不会切换

1 个答案: