HAML Twitter 부트 스트랩 탭이 제대로 작동하지 않습니다.

Question

(HAML) 루비 레일의 트위터 부트 스트랩 탭에 문제가 있습니다. 탭이 표시되지만 각 탭을 클릭해도 내용이 변경되지 않습니다. 아래 진술은 웹 페이지의 tab1 내용 맨 아래에도 표시됩니다. - 안녕하세요, 업데이트 중입니다. - 안녕하세요. 스폰서 십니다. - 안녕하세요, 저는 의견에 있습니다.

아래 코드는 탭 콘텐츠가 나열된 위치를 보여줍니다.

도움 주셔서 감사합니다. .tab-pane를 작업 할 수있는 탭에 대한

.row#main-content{style:"background-color: white;margin-bottom:40px;"} 
     .span8#content-left 
      .tabbable 
       %ul.nav.nav-tabs 
        %li.active 
         = link_to "About", "#tab1", "data-toggle"=>"tab" 
        %li 
         = link_to "Updates", "#tab2", "data-toggle"=>"tab" 
        %li 
         = link_to "Backerss", "#tab3", "data-toggle"=>"tab" 
        %li 
         = link_to "Comments", "#tab4", "data-toggle"=>"tab" 

       .tab-content 
        .tab-pane.active{id: "tab1"}    

         .row-fluid#content-left-first-row 
          = image_tag("content1.png") 

         .row-fluid#content-left-second-row 
          .span5 
           %button.btn#btn-like 
            %i.icon-thumbs-up 
            Like 
           %span{style: "font-size:80%;"} 976 people like this.Be the first of your friends.       
          .span2 
           %button.btn#btn-tweet 
            %i.icon-twitter       
            Tweet 
          .span5 
           %button.btn.btn-small#btn-embed <>Embed 

           %input{type:"text", placeholder:"http://loremipsum", style:"width:150px;margin-bottom: 0px;"} 
         .row.hr-row 
          %hr.hr-row 
         .row-fluid#content-left-third-row 
          %p 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
           %br 
           %br 
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
           %br 
           %br 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. 
          = image_tag("content2.png")    
          %p 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
           %br 
           %br 
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
           %br 
           %br 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. 
           %br 
           %br 
           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
         .row-fluid#content-left-fourth-row 
          %h4{style:"margin-top: 50px;"} Have a question? 
          .row.hr-row 
           %hr.hr-row 
          .span9{style:"margin-left: 0px;"} 
           %p 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          .span3 
           %button.btn.btn-primary.btn-large.pull-right{style:"margin-top: 20px;"} Ask a Question 

       .tab-pane{id: "tab2"} 
        %p Howdy, I'm in Campaigns. 
       .tab-pane{id: "tab3"} 
        %p Howdy, I'm in Campaigns Donations. 
       .tab-pane{id: "tab4"} 
        %p Howdy, I'm in Personal Donations. 

Answer 1

는 경우가 아닌 동일한 수준에 있어야합니다.

documentation을 참조하십시오.

는 또한

.tab-content 
    .tab-pane.active{ :id: "tab1"} 
    = image_tag("content1.png") 

.row-fluid#content-left-second-row 

.row-fluid#content-left-second-row 탭의 콘텐츠가 부족하고 위의 코드에서이

.tab-content 
    #tab1.tab-pane.active 
    //content for #tab1 goes here. 
    #tab2.tab-pane 
    //content for #tab2 goes here. 
    #tab3.tab-pane 
    //content for #tab3 goes here. 
    #tab4.tab-pane 
    //content for #tab4 goes here. 

같은 내용의 나머지 부분을 마크 업이 필요합니다. 따라서 탭 콘텐츠는 .tab-pane 하나만 있으므로 탭이 작동하지 않습니다.

모든 코드를 tab1 내에서 .tab-pane#tab1과 .tab-pane#tab2 사이로 이동해야합니다. 들여 쓰기 권한이

.tab-content 
    .tab-pane.active{ :id => "tab1"} 
    = image_tag("content1.png") 

    .row-fluid#content-left-second-row 
     ... 
    .row.hr-row 
     %hr.hr-row 
    .row-fluid#content-left-third-row 
     ...  
    .row-fluid#content-left-fourth-row 
     ... 
    .tab-pane{:id => "tab2"} 
    %p Howdy, I'm in Updates. 
    .tab-pane{:id => "tab3"} 
    %p Howdy, I'm in Sponsors. 
    .tab-pane{:id => "tab4"} 
    %p Howdy, I'm in Comments.