1

我在使用 (HAML) ruby​​ on rails 中的 twitter 引导选项卡时遇到问题。选项卡正在显示，但当我单击相应的选项卡时内容不会改变。下面的语句也显示在网页上 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没有标签内容以及其他内容。因此，选项卡无法正常工作，因为选项卡内容只有一个.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.
于 2013-04-16T06:05:16.650 回答