Twitter bootstrap 3 引导3中的选项卡未切换

我正在使用Sinatra在bootstrap3中使用黑暗主题。我正在尝试使用bootstrap3实现选项卡。但是，选项卡不切换，即当我打开浏览器时，只显示活动选项卡。当我点击“选项卡b”时，url会发生变化，但选项卡中的内容保持不变，并且该选项卡不会切换到其他选项卡。请帮忙。我应该包括任何引导墨水吗？这是我的Haml代码

!!!
%html{lang: "en"}
  %head
    %meta{charset: "utf-8"}/
    %title Job Tracker
    %meta{content: "width=device-width, initial-scale=1", name: "viewport"}/
    %link{href: "./bootstrap.css", media: "screen", rel: "stylesheet"}/
    %link{href: "../assets/css/bootswatch.min.css", rel: "stylesheet"}/
    %link{:href=>"//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css", :rel=>"stylesheet"}
    %link{href: "http://fonts.googleapis.com/css?family=Special+Elite", rel: "stylesheet", type: "text/css"}/
    %link{href: "https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"}


    :css
      .container {margin top :20px}
      body {padding-top : 70px; font-size : 18px; text-align: justify; font-family: 'Special Elite', cursive; }
      h1, h2, h3, h4, h5, h6 { text-align: center; font-family: 'Special Elite', cursive; }
    :javascript
      var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-23019901-1']);
       _gaq.push(['_setDomainName', "bootswatch.com"]);
         _gaq.push(['_setAllowLinker', true]);
       _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();



  %body
    .container
      %ul#myTab.nav.nav-tabs{style: "margin-bottom: 30px;"}
        %li.active
          %a{ href: "#a"} a
        %li
          %a{ href: "#b"} b
        %li
          %a{ href: "#c"} c
        %li
          %a{ href: "#d"} d

      .tab-content
        #a.tab-pane.fade.active.in
          %p Tab a
        #b.tab-pane.fade.in
          %p Tab b
        #c.tab-pane.fade.in
          %p Tab c
        #d.tab-pane.fade.in
          %p Tab d

  %script{src: "public/js/bootstrap.min.js"}

---

不确定它是否会导致任何问题，但我注意到您同时包含了Bootstrap3和Bootstrap2.3

%link{:href=>"//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css", :rel=>"stylesheet"}
%link{href: "http://fonts.googleapis.com/css?family=Special+Elite", rel: "stylesheet", type: "text/css"}/
%link{href: "https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"}

我对西纳特拉了解不多，不过结构看起来还不错。尝试不使用渐入功能，看看您是否可以在没有这些功能的情况下使用它

还可以在浏览器中检入开发者工具，查看是否存在任何js错误

---

希望这能帮你找到正确的方向。

非常感谢。成功了。我必须包括oly bootstrap 3。我必须添加一个js。这是经过修改的haml代码，它起作用了

%头 %元{字符集：“utf-8”}/ %职位追踪者 %meta{content:“宽度=设备宽度，初始比例=1”，名称：“视口”}/

%link{href:“./bootstrap.css”，媒体：“屏幕”，rel:“样式表”}/
%链接{href:“../assets/css/bootswatch.min.css”，rel:“样式表”}/
%链接{href:“public/js/bootstrap.min.js”}/
%链接{：href=>“//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css”，：rel=>“样式表”}/
%链接{href:“http://fonts.googleapis.com/css?family=Special+Elite”，rel:“样式表”，类型：“text/css”}/
%链接{href:“http://fonts.googleapis.com/css?family=Special+Elite”，rel:“样式表”，类型：“text/css”}/
/HTML5 shim和Respond.js IE8支持HTML5元素和媒体查询
/[如果是9号]
%链接{href:“http://netdna.bootstrapcdn.com/bootstrap/3.1.3/css/bootstrap-theme.min.css，rel:“样式表”}/
%脚本{src:“http://code.jquery.com/jquery.min.js，键入：“text/javascript”}
%脚本{src:“http://netdna.bootstrapcdn.com/bootstrap/3.1.3/js/bootstrap.min.js"}
%脚本{src:“http://code.jquery.com/jquery.min.js，键入：“text/javascript”}
%脚本{src:“http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"}

你好。我知道你是这个网站的新手，所以为了坚持这里的惯例，我认为你应该将这个代码作为一个附录（通过编辑）添加到你的原始问题中，然后将@AceWebDesign的答案标记为正确。

%link{href: "./bootstrap.css", media: "screen", rel: "stylesheet"}/
%link{href: "../assets/css/bootswatch.min.css", rel: "stylesheet"}/
%link{href: "public/js/bootstrap.min.js"}/

%link{:href=>"//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css", :rel=>"stylesheet"}/
%link{href: "http://fonts.googleapis.com/css?family=Special+Elite", rel: "stylesheet", type: "text/css"}/

%link{href: "http://fonts.googleapis.com/css?family=Special+Elite", rel: "stylesheet", type: "text/css"}/
/ HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries
/[if lt IE 9]
  <script src="../bower_components/html5shiv/dist/html5shiv.js"></script>
  <script src="../bower_components/respond/dest/respond.min.js"></script>


%link{href: "http://netdna.bootstrapcdn.com/bootstrap/3.1.3/css/bootstrap-theme.min.css", rel: "stylesheet"}/
%script{src: "http://code.jquery.com/jquery.min.js", type: "text/javascript"}
%script{src: "http://netdna.bootstrapcdn.com/bootstrap/3.1.3/js/bootstrap.min.js"}
%script{src: "http://code.jquery.com/jquery.min.js", type: "text/javascript"}
%script{src: "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"}