Javascript 引导选项卡不切换

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

我曾经使用过这段代码，而且它很有效，我使用了相同版本的jQuery和Bootstrap

我在这里找不到冲突。我的代码中没有相同的ID，就我所见，我的CSS不会覆盖引导CSS

我使用jquery2.1.4和bootstrap3.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>

表1文本

表2文本

表3文本

$（函数（）{
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
//获取活动选项卡的名称
var activeTab=$（e.target）.text（）；
//获取上一个选项卡的名称
var previousTab=$（e.relatedTarget）.text（）；
$（“.active tab span”）.html（activeTab）；
$（“.previous tab span”）.html（previousTab）；
});
});

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

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

$（函数（）{
$（'a[href*=#]：非（[href=#]）。单击（函数（）{
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（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 700);
返回false；
}
}
});
});

---

有没有办法让它们都起作用？是否可以更改#其他内容？

动画功能中的

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

});

---

演示：

您想用javascript实现什么？如果将其删除，则选项卡将正常工作。请参见示例否，它仍然不起作用：（我想可能与我的主导航有一些冲突？你在解决方案网站上的代码太乱了。请删除那里的多个jquery版本。尝试使用稳定的jquery版本，然后在它下面添加bootstrap.min.js。它应该可以正常工作，没有必要编写上面的脚本标记。我发现代码没有使用标签。请查看我的编辑说明。非常感谢，现在这两个功能都可以使用，但滚动功能在开始时会“跳跃”。也许只是向滚动功能添加一些代码，说明它不应该对标签中的href=id做出反应？？