Question

我在使用Sinatra的bootstrap3中使用Darkly主题。我正在尝试使用bootstrap3实现标签。但是，标签不是切换，即当我打开浏览器时，仅显示活动标签。当我点击“标签b”时，网址会更改，但标签中的内容保持不变，标签不会切换到其他标签。请帮忙。我应该包括任何引导墨水吗？这是我的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

不确定是否会导致任何问题，但我注意到你包括bootstrap 3和bootstrap 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"}

我对sinatra一无所知，但结构看起来还不错。尝试没有淡入淡出，看看你是否可以在没有这些的情况下使用它。

同时检查浏览器中的开发人员工具，看看是否有任何js错误。

希望能让你朝着正确的方向前进。

Answer 2

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

％头％meta {charset：＆＃34; utf-8＆＃34;} / ％title职位追踪者％meta {content：＆＃34; width = device-width，initial-scale = 1＆＃34 ;, name：＆＃34; viewport＆＃34;} /

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

选项卡不在Bootstrap 3中切换

2 个答案: