Twitter引导药丸与Rails 3.2.2

Question

我按照基本的railscast在Rails应用程序中使用Twitter Bootstrap.一切是伟大的,直到我不得不推到Heroku的,然后我遇到了一些问题,有PG宝石,我只好耙资产:预编译推就OK.终于我解决了.

现在,我正在尝试在我的应用程序中使用药丸,我从文档中复制/粘贴并更改了href中的URL :)

<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,但所选选项不会更改为class ="active".我不知道为什么...我认为这是javascript但是悬停属性工作正常...我的意思是,当鼠标超过一个选项(与活动不同)时,它的样式会改变.

我尝试过rake资产:干净,但没有改变

谢谢

Answer 1

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

你的清单看起来应该是这样的

    <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哈希中传递的控制器名称(以及必要时的操作)来完成此操作.

Answer 2

你可以使用这样的东西:

<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>

Answer 3

我使用帮助器以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>