Question

我不了解Twitter Bootstrap如何为导航执行活动链接。如果我有这样的常规导航（在铁轨链接上使用ruby）：

<ul class="nav">
  <li class="active"> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>        
</ul>

如何根据点击的链接保持活动状态？

Answer 1

刚才在这个问题上回答了同样的问题 Twitter Bootstrap Pills with Rails 3.2.2

<ul class="nav">
  <li class="<%= 'active' if params[:controller] == 'controller1' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller2' %>"> <a href="/link">Link</a> </li>
  <li class="<%= 'active' if params[:controller] == 'controller3' %>"> <a href="/link">Link</a> </li>        
</ul>

Answer 2

https://github.com/twg/active_link_to

<%= active_link_to 'Users', users_path, :wrap_tag => :li %>

#=> <li class="active"><a href="/users">Users</a></li>

Answer 3

我使用帮助器以Rails＆＃39;的方式实现这一点。帮助者。

在帮助程序中（例如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 %>

此示例生成（在＆＃39;用户＆＃39;页面上）：

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

Answer 4

使用此选项可根据当前路线选择导航中的活动链接，而无需服务器代码：

    $(document).ready(function () {
        $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
    });

Answer 5

我在 haml 中使用逻辑和（&&）取得了成功：

%ul.nav
  %li{class: current_page?(events_path) && 'active'}
    = link_to "Events", events_path
  %li{class: current_page?(about_path) && 'active'}
    = link_to "About Us", about_path

Answer 6

对于每个链接：

<% if current_page?(home_path) -%><li class="active"><% else -%><li><% end -%>
  <%= link_to 'Home', home_path %>
</li>

甚至

<li <% if current_page?(home_path) -%>class="active"<% end -%>>
  <%= link_to 'Home', home_path %>
</li>

Answer 7

不确定您是在询问如何使用twitter bootstrap css，还是使用rails侧。我正在考虑铁路方面。

如果是，请结帐#link_to_if方法或#link_to_unless_current方法

Answer 8

今天我遇到了同样的问题/问题，但采用了其他方法来解决问题。我在application_helper.rb中创建了一个辅助函数：

def navMainAktiv(actionName)
    if params[:action] == actionName    
    "active"
    end
end

，链接如下：

<li class="<%= navMainAktiv('about')%>"><%= link_to "About", about_path %></li>

您可以将params[:action]替换为params[:controller]，并在链接中设置您的控制器名称。

Answer 9

您可以在application_helper.rb

中定义辅助方法

def create_link(text, path)
  class_name = current_page?(path) ? 'active' : ''

  content_tag(:li, class: class_name) do
    link_to text, path
  end
end

现在您可以使用：

create_link 'xyz', any_path将呈现为

<li class="active">
  <a href="/any">xyz</a>
</li>

希望它有所帮助！

Answer 10

我对每个li：

使用此功能

<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>

Answer 11

你应该通过操纵CSS类来自己完成。也就是说，如果用户点击某个链接，然后执行某些操作（目标操作），将上一个链接设置为非活动状态并激活新链接。

如果您的链接将您带到服务器（即，重新加载页面），那么您只需在服务器上正确呈现活动链接即可。否则，如果你正在做一些客户端的东西（切换标签窗格或其他），你必须使用javascript。

Answer 12

已经有很多答案，但这是我为了让Bootstrap Icons与主动链接一起工作所写的内容。希望它会帮助某人

这个助手会给你：

li元素，其中包含包含自定义文字的链接
可选Bootstrap3图标
将变为活动状态

将它放在您的application_helper.rb

def nav_link(link_text, link_path, icon='')
  class_name = current_page?(link_path) ? 'active' : ''
  icon_class = "glyphicon glyphicon-" + icon

  content_tag(:li, :class => class_name) do
    (class_name == '') ? (link_to content_tag(:span, " "+link_text, class: icon_class), link_path)
    : (link_to content_tag(:span, " "+link_text, class: icon_class), '#')
  end
end

并使用链接：

<%= nav_link 'Home', root_path, 'home'  %>

最后一个参数是可选的 - 它会在链接中添加图标。使用字形图标的名称。如果你想要没有文字的图标：

    <%= nav_link '', root_path, 'home'  %>

Answer 13

这里的许多答案都有可行的方法或部分答案。我结合了很多东西来制作我使用的rails helper方法：

# helper to make bootstrap3 nav-pill <li>'s with links in them, that have
# proper 'active' class if active. 
#
# the current pill will have 'active' tag on the <li>
#
# html_options param will apply to <li>, not <a>. 
#
# can pass block which will be given to `link_to` as normal. 
def bootstrap_pill_link_to(label, link_params, html_options = {})
  current = current_page?(link_params)

  if current
    html_options[:class] ||= ""
    html_options[:class] << " active "
  end

  content_tag(:li, html_options) do
    link_to(label, link_params)
  end      
end

通过参数检查可以使其更加漂亮，以支持link_to等上的&block。

Answer 14

当您可以在current_page?哈希中指定自定义class名称时，我使用build in helper html_options编写了简单的帮助方法。

def active_link_to(name = nil, options = nil, html_options = nil, &block)
  active_class = html_options[:active] || "active"
  html_options.delete(:active)
  html_options[:class] = "#{html_options[:class]} #{active_class}" if current_page?(options)
  link_to(name, options, html_options, &block)
end

示例（当您在root_path路线上时）：

<%= active_link_to "Main", root_path %>
# <a href="/" class="active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered" %>
# <a href="/" class="bordered active">Main</a>

<%= active_link_to "Main", root_path, class: "bordered", active: "disabled" %>
# <a href="/" class="bordered disabled">Main</a>

Answer 15

您可以使用tabulous作为链接

文章here关于如何将表格与twitter bootstrap和rails 3.x

结合起来

Answer 16

您听起来需要实施导航系统。如果它很复杂，它可能会变得相当丑陋且相当快。

在这种情况下，您可能希望使用可以处理该插件的插件。您可以使用navigasmic或simple navigation（我建议使用navigasmic，因为它会将主图层保留在视图中，它所属的位置，而不是某些配置中）

Answer 17

最短代码

这涉及BOTH导航和子导航列表元素。您可以将数组传递给单个路径，并且可以处理这两个路径。

application_helper

# Active page method
def ap(p:);'active' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end

view（html.erb）

<ul class="nav navbar-nav">
  <li class="<%= ap p: home_path %>">Home</li>
  <li class="<%= ap p: account_path %>">Account</li>

  <li class="dropdown <%= ap p: [users_path, new_user_path] %>">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Users</a>
    <ul class="dropdown-menu" role="menu">
      <li class="<%= ap p: users_path %>">Users</li>
      <li class="<%= ap p: new_user_path %>">Add user</li>
    </ul>
  </li>
</ul>

Answer 18

在Sinatra上使用ruby ..

我使用bootstrap裸主题，这是示例导航条代码。注意元素的类名 - ＆gt; .nav - 这是在java脚本中引用的。

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

在视图页面（或部分）中添加：javascript，这需要在每次加载页面时执行。

haml view snippet - ＆gt;

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

在javascript调试器中，确保'href'属性的值与window.location.pathname匹配。这与@Zitrax的解决方案略有不同，后者帮助我解决了我的问题。

Answer 19

基本，没有助手

<%= content_tag(:li, class: ('active' if request.path == '/contact')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

我使用这个，因为我有多个班级 -

<%= content_tag(:li, class: (request.path == '/contact' ? 'active black' : 'black')) do %>
    <%= link_to 'Contact', '/contact' %>
<% end %>

Answer 20

这就是我的所作所为：

我创建了一个ViewsHelper并包含在ApplicationController中：

include ViewsHelper

Inside ViewsHelper我创建了一个这样的简单方法：

def page_state(path)
  current_page?(path) ? 'active' : ''
end

在我看来，我这样做：

<li class="<%= page_state(foobar_path) %>"><%= link_to 'Foobars', foobar_path %></li>

Answer 21

  def active_navigation?(controllers_name, actions_name)
   'active' if controllers_name.include?(controller_name) && actions_name.include?(action_name)
  end

纤细

li class=(active_navigation?(['events'], ['index', 'show'])) = link_to t('navbar.events'), events_path

Answer 22

这对我有用：

SELECT *
FROM  Dummy_tab_2 
UNION
SELECT *
FROM   Dummy_tab_1

<li class="nav-item <%= 'active' if current_page?(root_path) %>" > <%= link_to 'Home', root_path, class:"nav-link"%> </li> <li class="nav-item <%= 'active' if current_page?(tools_path) %>" > <%= link_to 'Tools', tools_path, class:"nav-link" %> </li> <li class="nav-item"> <a class="nav-link" href="#">Request a new tool</a> </li> <li class="nav-item <%= 'active' if current_page?(home_about_path) %>" > <%= link_to 'About us', home_about_path, class:"nav-link"%> </li> 中的代码只是 <%= %>，而 ruby 表示该代码的结果将显示在 HTML 中。为您要添加的每个选项执行此操作在您的导航栏中，它应该可以正常工作。

如何让Twitter-Bootstrap导航显示活动链接？

22 个答案:

最短代码

application_helper

view（html.erb）