7

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

我正在使用这样的东西：

<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") 这导致调用 url .../salons/1%23tab9。我认为我需要它的.../salons/1#tab9。

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

使用：

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

3 回答 3

12

我自己可以弄清楚，这里的这篇文章把我带到了正确的轨道上：如何让 Twitter-Bootstrap 导航显示活动链接？

<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")
于 2012-06-19T22:24:59.810 回答
1

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

虽然激活第一个选项卡可能对每个人都没有用，但如果没有传递参数，可以轻松修改上面的代码以激活特定选项卡。

于 2013-03-08T21:13:30.173 回答
1

您只需要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>
于 2013-05-31T21:18:12.157 回答