Question

我想在“mypage”的上半部分设置标签，并按照指导编写如下代码，但它不起作用。我不知道为什么不这样做。你能告诉我为什么吗？

数据切换可能有问题。

<div class="span8">
      <ul class= "nav nav-tabs">
       <li class="active"><a href="#menu1" data-toggle="tab">疑問リスト</a></li>
       <li><a href="#menu2" data-toggle="tab">フォロー中の投稿</a></li>
       <li><a href="#menu3" data-toggle="tab">ユーザーの投稿</a></li>  
      </ul> 
      <div class="tab-content">
        <div class="tab-pane active" id="menu1">
          <h4 class="title">疑問リスト </h4>
           <div class="message_area">
             <% @posts_in_groups = GroupMessage.where(:member_id => params[:id]).order("created_at desc").paginate(:page => params[:page], :per_page => 3) %>
               <% @posts_in_groups.each do |post| %>  
                <div class="each_message">
                  <%= link_to post.group do %>
                    <%= image_tag post.group.imageurl, :width => '20', :height => '25' %>
                    <%= "(" + post.group.name + ")" %>
                  <% end %>
                  Page: <%= post.page %> &
                  Line: <%= post.line %>
                  (<%= post.created_at.strftime'%Y-%m-%d %H:%M' %>)
                  <div class="group_message">
                    <p class="message_content">
                      <%= link_to truncate(post.content, :length => 50), post %>
                    </p>
                  </div><!--group_message-->
                  <br>      
                </div><!--each message-- >   
                <%= will_paginate(@posts_in_groups) %> 
              <% end %>  
            </div><!--message area-->
          </div><!--menu1-->
        <div class="tab-pane" id="menu2"> 
          <h4 class="title">フォロー中の投稿 </h4>
           <div class="message_area">
              <% @member=Member.find(params[:id])%>
              <% follwers = @member.friends.reverse.map{ |f| f.friend_id }%>
              <% join_groups = @member.groups.reverse.map{ |group| group.id } %>
              <% GroupMessage.where(:group_id => join_groups, :member_id => follwers).order("created_at desc").limit(15).each do |gmsg| %> 
                <div class="each_message">
                  <a href="/groups/<%= gmsg.group.id%>" ><%= image_tag gmsg.group.imageurl,:width => '20', :height => '25' %><%= "(" + gmsg.group.name + ")" %></a>
                    <%= 'Page:' + gmsg.page.to_s + '＆' %><%= 'Line:' + gmsg.line.to_s %>
                  <a href="/members/<%= gmsg.member.id%>"><%= gmsg.member.name %></a>
                  (<%= gmsg.created_at.strftime'%Y-%m-%d %H:%M' %>)
                 <div class="group_message">  
                  <p class="message_content"><a href="/group_messages/<%= gmsg.id%>" > <%= truncate(gmsg.content, { :length => 50}) %></a></p>
                 </div><!--group_message-->
                 <br/>
                  <% if gmsg.group_message_comments.present? %>
                     <% gmsg.group_message_comments.each do |gmsc|%>
                      <div class="group_message_comment">
                         <p><a href="/members/<%= gmsc.member ? gmsc.member.id : "unknown" %>"><%= gmsc.member ? gmsc.member.name : "unknown" %></a>  (<%= gmsc.created_at.strftime'%Y-%m-%d %H:%M' %>)</p>
                         <%= gmsc.content %> 
                      </div> <!--group_message_comment-->
                      <br/>
                     <% end %><!-- each do -- >
                  <% else %> 
                  <% end %> <!--if -->
                </div><!--each_message-->
                <br>
              <% end %>  <!--each do -->
           </div> <!--message_are--> 
        </div><!--menu2--> 
         <div class="tab-pane" id="menu3">
          <h4 class="title">ユーザーの投稿</h4>
            <div class="message_area">
              <% @member=Member.find(params[:id])%>
              <% join_groups = @member.group_in_members.reverse.map{ |g| g.group_id }%>
              <% join_groups = @member.groups.reverse.map{ |group| group.id } %>
              <% @gmsg_users = GroupMessage.where(:group_id => join_groups).order("created_at desc").limit(15)%>
              <% @gmsg_users.each do |gmsg| %> 
                <div class="each_message">
                  <a href="/groups/<%= gmsg.group.id%>" ><%= image_tag gmsg.group.imageurl,:width => '20', :height => '25' %><%= "(" + gmsg.group.name + ")" %></a>
                    <%= 'Page:' + gmsg.page.to_s + '＆' %><%= 'Line:' + gmsg.line.to_s %>
                  <a href="/members/<%= gmsg.member.id%>"><%= gmsg.member.name %></a>
                  (<%= gmsg.created_at.strftime'%Y-%m-%d %H:%M' %>)
                 <div class="group_message">  
                  <p class="message_content"><a href="/group_messages/<%= gmsg.id%>" > <%= truncate(gmsg.content, { :length => 50}) %></a></p>
                 </div><!--group_message-->
                 <br/>
                  <% if gmsg.group_message_comments.present? %>
                     <% gmsg.group_message_comments.each do |gmsc|%>
                      <div class="group_message_comment">
                         <p><a href="/members/<%= gmsc.member ? gmsc.member.id : "unknown" %>"><%= gmsc.member ? gmsc.member.name : "unknown" %></a>  (<%= gmsc.created_at.strftime'%Y-%m-%d %H:%M' %>)</p>
                         <%= gmsc.content %> 
                      </div> <!--group_message_comment-->
                      <br/>
                     <% end %><!-- each do -- >
                  <% else %> 
                  <% end %> <!--if -->
                </div><!--each_message-->
                <br>
              <% end %>  <!--each do -->
           </div> <!--message_are--> 
        </div><!--menu3-->
      </div><!--tab-content-->
  </div><!-- span8 -->
 </div><!-- row -->
</div><!-- container -->
  <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

Answer 1

我认为你错过了标签内容菜单中的“淡入”课程。我创建了这个例子： http://bootply.com/99314

您可以看到“tab-pane fade”类使得div不可见但“tab-pane淡入淡出”使其显示。当您从上部导航栏中选择时，会添加“在...中激活”。

如果它无法解决您的问题，请具体说明它是如何工作的。

数据切换在Twitter Bootstrap 2上不起作用

1 个答案: