Rails 3.2.3 + Twitter Bootstrap + Nav-Tabs:如何显示特定标签?

关于rails和bootstrap的另一个新手问题。

我正在使用这样的东西:

我的问题是我渲染包含表格的’地址’。 通过提交此表单,我最终会使用不同的控制器。 使用此控制器保存新地址后,我想重定向到此页面并显示地址选项卡。

我尝试的重定向命令是:redirect_to salon_path(@ salon.id.to_s +“#tab9”)这导致调用url … / salons / 1%23tab9。 我认为我需要它… / salons / 1#tab9。

但也许你有一个更好的解决方案如何选择一个特定的选项卡。

使用:

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

我可以自己解决这个问题,这篇文章让我走上正轨: 如何让Twitter-Bootstrap导航显示活动链接?

 
<%= render 'about_us' %>
<%= render 'address' %>

在我的例子中,我称之为:

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

为了将来参考和有类似问题的用户,我会再添加一个function给Marcus的回复。 解决方案本身是完美的,就像一个魅力,但如果没有传递tab参数会发生什么? 然后,bootstrap不显示任何选项卡内容,只显示选项卡。 对我来说,这看起来相当丑陋和不专业。 在我的例子中,我添加了以下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元素以查看是否有任何已激活的元素。 如果它们都不是,则会使第一个选项卡和选项卡窗格处于活动状态。

虽然激活第一个选项卡可能对每个人都没有用,但是如果没有传递参数,可以很容易地修改上面的代码以使特定选项卡处于活动状态。

您只需为每个列表项锚点执行data-toggle="tab"为每个data-toggle="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!
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?
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?
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!
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.