关于导轨和引导另一个新手-问题。
我使用的是这样的:
<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'.
我可以找出自己,这张贴在这里给我带来了正轨: 如何获得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")
对于未来的参考,并为有类似问题的用户,我想补充一个更多功能,马库斯的响应。 该解决方案本身是完美的,就像一个魅力,但如果没有标签参数传递会发生什么? 然后引导不仅显示标签显示任何标签的内容和。 对我来说,这看起来相当丑陋和不专业。 就我而言,我增加了以下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"
每个列表项的锚和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>