引导选项卡不切换

Bootstrap tabs do not switch

本文关键字：选项      更新时间：2023-09-26

不幸的是，我无法强制我的选项卡切换。

我

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

我在这里找不到冲突。我的代码中没有相同的 ID，据我所知，我的 CSS 不会覆盖引导 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>

编辑我发现代码与选项卡冲突，它负责平滑滚动：

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

有没有办法让它们都工作？我可以将#更改为其他内容吗？

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

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

相关文章：