Tabs不能在Bootstrap中切换3

Question

我在使用Sinatra的bootstrap3中使用Darkly主题。我正在尝试使用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"} 

Answer 1

不知道其造成任何问题，但我注意到，你既包括引导3和引导2.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错误。

希望能让你走向正确的方向。

Answer 2

非常感谢。有效。我必须包括oly bootstrap 3.我必须添加js.This是改变haml代码，它的工作。

％头 ％间{字符集： “UTF-8”}/ ％标题作业跟踪 ％间{内容： “宽度=设备宽度，初始规模= 1”，名称： “视口”}/

%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"}