Twitter Bootstrap药丸与轨道3.2.2

问题描述：

我跟随基本railscast在Rails应用程序中使用Twitter Bootstrap。一切都很好，直到我不得不推到heroku，然后我遇到了pg gem的一些问题，我不得不耙资产：预编译以推动它。最后我解决了。现在Twitter Bootstrap药丸与轨道3.2.2

，我想在我的应用程序中使用的药丸，我从文档复制/粘贴和HREF :)

<div class="container"> 
    <div class="row"> 

    <div class="span3"> 
     <p> Lorem Ipsum</p> 
    </div> 

    <div class="span9">  
     <ul class="nav nav-pills"> 
     <li class="active"><a href="/">Home</a></li> 
     <li><a href="/products">Products</a></li> 
     <li><a href="/categories">Categories</a></li> 
     </ul> 
    </div> 

    </div> 
</div>

改变URL时，我推了一个链接，我重定向到正确的url，但所选选项不会更改为class =“active”。我不知道为什么...我认为这是JavaScript，但悬停属性工程确定...我的意思是，当鼠标结束了一个选项（与活动不同），它的样式更改确定。

我试图耙资产：干净，但不会发生变化

感谢

[如何获取Twitter-Bootstrap导航以显示活动链接？]（http：// stackoverflo w.com/questions/9879169/how-to-get-twitter-bootstrap-navigation-to-show-active-link） – 2015-01-11 23:15:33

答

实际上，你必须自己处理这个！

你的名单应该是这个样子

<li class="<%= 'active' if params[:controller] == 'yourdefaultcontroller' %>"><a href="/">Home</a></li> 
    <li class="<%= 'active' if params[:controller] == 'products' %>"><a href="/products">Products</a></li> 
    <li class="<%= 'active' if params[:controller] == 'categories' %>"><a href="/categories">Categories</a></li>

你需要在每个请求的选项卡是活动之一指定。您可以通过依赖控制器的名称（以及需要执行的操作）在params散列中传递。

太好了，完美无缺。 – Daniel 2012-03-25 18:24:07

@ user1088357单击姓名旁边的复选标记以接受他的答案。这也适用于我。感谢皮埃尔在我提出的问题上。 – LearningRoR 2012-03-26 20:52:34

我认为这个想法在这里是正确的，但直接去参数散列似乎是一个坏主意。同样重复一遍又一遍的相同的代码。我会推荐至少使用current_page？方法来检查当前的控制器/操作，并且还会将代码移到帮助器中以避免代码重复。 – 2012-05-09 17:13:21

答

您可以使用这样的事情：

<li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li> 
<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li> 
<li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li>

答

我用了一个帮手的Rails的形式佣工的风格来实现这一点。

在辅助（例如app/helpers/ApplicationHelper.rb）：

def nav_bar 
    content_tag(:ul, class: "nav navbar-nav") do 
    yield 
    end 
end 

def nav_link(text, path) 
    options = current_page?(path) ? { class: "active" } : {} 
    content_tag(:li, options) do 
    link_to text, path 
    end 
end

然后，在视图（例如app/views/layouts/application.html.erb）：

<%= nav_bar do %> 
    <%= nav_link 'Home', root_path %> 
    <%= nav_link 'Posts', posts_path %> 
    <%= nav_link 'Users', users_path %> 
<% end %>

该示例产生时（当 '用户' 页）：

<ul class="nav navbar-nav"> 
    <li><a href="/">Home</a></li> 
    <li><a href="/posts">Posts</a></li> 
    <li class="active"><a href="/users">Users</a></li> 
</ul>

Twitter Bootstrap药丸与轨道3.2.2

相关推荐