导轨3.2.3 + Twitter的引导+导航选项卡:如何显示一个特定的标签?(Rails 3.2.

2019-07-30 00:05发布

关于导轨和引导另一个新手-问题。

我使用的是这样的:

<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">About us</a></li>
            <li><a href="#tab9" data-toggle="tab">Address</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <%= render 'about_us' %>
    </div>
    <div class="tab-pane" id="tab9">
        <%= render 'address' %>
    </div>
</div>

我的问题是,我呈现“地址”,其中包括一种形式。 提交这份表单我在不同的控制器结束。 保存新的地址与此控制器后,我想重定向到该页面,并显示地址选项卡。

我试图重定向的命令是:redirect_to的salon_path(@ salon.id.to_s + “#TAB9”)这导致调用网址... /美发/ 1%23tab9。 我想我需要它... /美发/ 1#TAB9。

但是,也许你有一个更好的解决方案如何选择一个特定的标签。

使用:

gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.3'.

Answer 1:

我可以找出自己,这张贴在这里给我带来了正轨: 如何获得Twitter的引导导航以显示活动链接?

<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
    <li class="<%= 'active' if params[:tab] == 'tab1' %>"><a href="#tab1" data-toggle="tab">About us</a></li>
    <li class="<%= 'active' if params[:tab] == 'tab9' %>"> <a href="#tab9" data-toggle="tab">Address</a></li>
</ul>

<div class="tab-content">
    <div class="<%= if (params[:tab] == 'tab1' || !params[:tab])then 'tab-pane active'  else 'tab-pane' end%>" id="tab1">
        <%= render 'about_us' %>
    </div>
    <div class="<%= if params[:tab] == 'tab9' then 'tab-pane active'  else 'tab-pane' end%>" id="tab9">
        <%= render 'address' %>
    </div>
</div>

而在我的例子中,我这样称呼它:

redirect_to salon_path(@salon.id, tab:"tab9")


Answer 2:

对于未来的参考,并为有类似问题的用户,我想补充一个更多功能,马库斯的响应。 该解决方案本身是完美的,就像一个魅力,但如果没有标签参数传递会发生什么? 然后引导不仅显示标签显示任何标签的内容和。 对我来说,这看起来相当丑陋和不专业。 就我而言,我增加了以下jQuery来解决它。

$(document).ready(function() {

//The following set of code checks to see if any tab is already active (this occurs if a parameter to tab would be passed)
//If no tab is active, make the first tab and tab-pane active
var elementAlreadyActive = false;
$('.nav-tabs li').each(function(index, li) {
    var element = $(li);
     if (element.attr("class") == "active"){
          elementAlreadyActive = true;
     }

});
if (!elementAlreadyActive){
    $('.nav-tabs li:first').addClass('active');
    $('.tab-content div:first').addClass('active');
} });

而不是显示如果参数没有传递什么的,代码检查所有的li元素,以查看是否有任何已处在活动状态。 如果他们都不是,它使第一个标签和标签窗格活跃。

虽然使第一片活性可能不是每个人是有用的,上述代码可以很容易地进行修改,以使特定的标签活性,如果没有参数传递。



Answer 3:

你只需要做data-toggle="tab"每个列表项的锚和class="tab-pane"为每个标签

<div class="tabbable">
 <ul class="nav nav-tabs" id="proftabs">
  <li><a href="#profile_tab"  data-toggle="tab" >Profile</a></li>
  <li><a href="#friends_tab" data-toggle="tab">Friends</a></li>
  <li><a  href="#photos_tab" data-toggle="tab">Photos</a></li>
  <li><a  href="#videos_tab" data-toggle="tab">Videos</a></li>
  <li><a  href="#quotes_tab" data-toggle="tab">Quotes</a></li>

   <div class="tab-content">
        <div id="profile_tab" class="tab-pane">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid excepturi id, maxime nesciunt recusandae repellat unde veritatis! Eveniet, fugiat, ipsum. Architecto assumenda, culpa impedit molestias natus porro quisquam repudiandae sunt!
        </div>
    <div id="friends_tab"  class="tab-pane">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut corporis cupiditate incidunt. Accusantium adipisci architecto dignissimos eligendi est explicabo ipsa molestiae nesciunt optio porro provident, sint soluta, tempore temporibus vitae?
    </div>
    <div id="photos_tab"  class="tab-pane">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ex harum iste magnam necessitatibus sed sit. A adipisci amet cupiditate delectus dolor itaque numquam officia omnis, provident quod temporibus voluptatibus?
    </div>
    <div id="videos_tab"  class="tab-pane">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto at autem dolore, dolorum eaque earum eius, id in iste molestias officia, possimus qui quis recusandae repellat reprehenderit suscipit voluptatum!
    </div>
    <div id="quotes_tab"  class="tab-pane">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consectetur, in necessitatibus qui quidem tenetur unde voluptatum! Aspernatur dolorem earum id labore molestiae nam quas quisquam, sapiente sequi ut voluptatibus.
    </div>
  </div>
</div>


文章来源: Rails 3.2.3 + Twitter Bootstrap + Nav-Tabs: How to show a specific tab?