Я не понимаю, как Twitter Bootstrap делает активные ссылки для навигации. Если у меня есть регулярная навигация, подобная этой (с привязкой ruby on rails):
<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 Бутстрап-таблетки с рельсами 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>
Используйте это вместо этого, чтобы выбрать активную ссылку в nav на основе текущего маршрута без кода сервера:
$(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>
Не уверен, что вы спрашиваете о том, как используется CSS-кирилка twitter или сторона рельсов. Я принимаю сторону рельсов.
если так вывести метод #link_to_if
или #link_to_unless_current
Сегодня у меня был тот же вопрос/проблема, но с другим подходом к решению. Я создаю вспомогательную функцию в 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] и установить имя контроллера в ссылке.
Я использую это для каждого 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, который будет отображаться как
<li class="active">
<a href="/any">xyz</a>
</li>
Надеюсь, что это поможет!
Вы должны сделать это самостоятельно, манипулируя классами CSS. То есть, если пользователь нажимает на какую-либо ссылку, то делает что-то (целевое действие), устанавливает предыдущую ссылку неактивной и новую ссылку активным.
Если ваши ссылки переведут вас на сервер (то есть перезагрузите страницу), вы можете просто правильно отобразить активную ссылку на сервере. В противном случае, если вы делаете некоторые вещи на стороне клиента (переключаете вкладки или что-то еще), вы должны использовать javascript.
вы можете использовать tabulous для ссылок
article здесь о том, как объединить табуляцию с твитер-бутстрапом и рельсами 3.x
Я написал простой хелпер-метод, используя build in view helper current_page?, когда вы можете указать собственное имя class в хеше 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>
Многие из ответов здесь содержат то, что будет работать, или частичные ответы. Я объединил кучу вещей, чтобы использовать этот метод поддержки рельсов:
# helper to make bootstrap3 nav-pill <li> 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, работающие с активной ссылкой. Надежда Это поможет кому-то
Этот помощник даст вам:
Поместите это в свой 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 или простую навигацию (я бы рекомендуем navigasmic, потому что он удерживает основной слой в представлении, где он принадлежит, а не в некоторой конфигурации)
Это относится к элементам BOTH nav и sub nav. Вы можете передать либо массив по одному пути, и иметь дело с обоими.
# Active page method
def ap(p:);'active' if p.class == Array ? p.map{|m| current_page? m}.any? : (current_page? p) end
<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>
Использование ruby на Sinatra..
Я использую bootstrap bare theme, вот пример кода навигатора. Обратите внимание на имя класса элемента → .nav - как это указано в java script.
/ 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 →
- 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, которое помогло мне решить мою проблему.
Базовый, без помощника
<%= 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 %>
Вот что я сделал:
Я создал ViewsHelper и включен в ApplicationController:
include ViewsHelper
Внутри ViewsHelper я создал простой способ:
def page_state(path)
current_page?(path) ? 'active' : ''
end
На мой взгляд, я делаю это:
<li class="<%= page_state(foobar_path) %>"><%= link_to 'Foobars', foobar_path %></li>
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