如何让Twitter-Bootstrap导航显示活动链接？
我不了解Twitter Bootstrap如何为导航启用活动链接。 如果我有像这样的常规导航（在rails连接上使用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> 如何根据点击链接保持活动状态？
刚刚在这里回答了同样的问题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>
你可以使用类似的东西（非常类似于@phil提到的，但稍微短一些）：
<ul class="nav"> <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> </ul>
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>
我用一个帮手来实现这个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>
使用这个替代方法来select基于当前路线的导航中没有服务器代码的活动链接：
$(document).ready(function () { $('a[href="' + this.location.pathname + '"]').parent().addClass('active'); });
我发现在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
对于每个链接：
<% 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>
不知道你是问如何twitter引导CSS是使用，或铁路方面。 我假设铁路方面。
如果是，请检查#link_to_if方法或#link_to_unless_current方法
今天，我有同样的问题/问题，但解决scheme的另一种方法。 我在application_helper.rb中创build了一个辅助函数：
def navMainAktiv(actionName) if params[:action] == actionName "active" end end
链接如下所示：
<li class="<%= navMainAktiv('about')%>"><%= link_to "About", about_path %></li>
您可以使用params[:controller]replaceparams[:action] ，并在链接中设置您的控制器名称。
我用这个每个li ：
<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>
你可以在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 ，将渲染为的create_link 'xyz', any_path
<li class="active"> <a href="/any">xyz</a> </li>
希望它有帮助！
你应该通过操纵CSS类来自己做。 也就是说，如果用户点击某个链接，则执行一些操作（目标操作），将之前的链接设置为非活动状态，并将新链接激活。
如果你的链接把你带到服务器（即，使页面重新加载），那么你可以在服务器上正确呈现活动链接。 否则，如果你正在做一些客户端的东西（切换标签窗格或其他），你必须使用JavaScript。
你可以使用tabulous作为链接
这里的文章关于如何将tablike和twitter bootstrap和rails 3.x结合起来
我写了简单的助手方法使用构build视图助手current_page? 当你可以在html_options哈希中指定自定义的class名。
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>
这里的许多答案都有可行的或部分的答案。 我组合了一堆东西，使我使用这个扶手方法：
# 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
可以通过参数检查来支持&block link_to等等。
已经有很多答案，但这里是我写的让Bootstrap图标与主动链接一起工作的。 希望它会帮助别人
这个帮手会给你：
- 包含自定义文本的链接
- 可选的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' %>
你听起来像你需要实现一个导航系统。 如果它很复杂，可能会变得非常难看，非常快。
在这种情况下，你可能想使用一个可以处理的插件。 你可以使用navigasmic或简单的导航 （我会build议navigasmic，因为它保持在一个视图，它属于，而不是在一些configuration的主视图层）
最短的代码
这涉及到BOTH导航和子导航列表元素。 你可以传递一个数组的单一path，并将处理这两个。
application_helper
# Active page method def ap(p:);'active' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end
查看（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>
在Sinatra上使用ruby
我使用引导裸主题，这里是示例导航栏代码。 注意元素的类名 – > .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查看片段 – >
- content_for :javascript do :javascript $(function () { $.each($('.nav').find('li'), function() { $(this).toggleClass('active', $(this).find('a').attr('href') == window.location.pathname); }); });
在javascriptdebugging器中确保你有'href'属性与window.location.pathname匹配的值。 这与@Zitrax的解决scheme略有不同，它帮助我解决了我的问题。
基本，没有帮手
<%= 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 %>
以下是我所做的：
我创build了一个ViewsHelper并包含在ApplicationController中：
include ViewsHelper
里面ViewsHelper我创build了这样一个简单的方法：
def page_state(path) current_page?(path) ? 'active' : '' end
在我看来，我这样做：
<li class="<%= page_state(foobar_path) %>"><%= link_to 'Foobars', foobar_path %></li>
