1

(HAML) ruby​​ on rails の Twitter ブートストラップ タブに問題があります。タブは表示されていますが、それぞれのタブをクリックしても内容が変わりません。以下のステートメントは、Web ページの tab1 コンテンツの下部にも表示されています。-こんにちは、私はアップデートにいます。-こんにちは、私はスポンサーです。-こんにちは、私はコメントにいます。

以下のコードは、タブのコンテンツが表示される場所を示しています。

ご協力いただきありがとうございます！

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

1 に答える 1

0

タブが機能する.tab-paneには、同じレベルにある必要がありますが、これはあなたの場合ではありません。

ドキュメントを参照してください。

このようなマークアップが必要です

.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-content
  .tab-pane.active{ :id: "tab1"}
    = image_tag("content1.png")

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

.row-fluid#content-left-second-rowタブコンテンツと残りのコンテンツから外れています。したがって、タブコンテンツには 1 つしかないため、タブは機能しません.tab-pane。

.tab-pane#tab1すべてのコードを 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.
于 2013-04-16T06:05:16.650 に答える