Я не понимаю, как Twitter Bootstrap делает активные ссылки для навигации. Если у меня такая обычная навигация (с привязкой рубина на рельсах):
<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>
Как сохранить его в активном состоянии на основе нажатой ссылки?
ruby-on-rails
twitter-bootstrap
LearningRoR
источник
источник
Ответы:
Только что ответил на тот же вопрос здесь Twitter Bootstrap Pills with Rails 3.2.2
источник
%li{:class => "#{'active' if current_page?(root_path)}"}=link_to "Home", root_path
controller_name
иaction_name
помощник вместо того , чтобы доступ к ним из хэша Params.Вы можете использовать что-то вроде (очень похоже на то, что упомянул @phil, но немного короче):
источник
'active' if params[:controller] == 'controller1'
user_*_path
в<%= 'active' if current_page?(root_path) %>
?https://github.com/twg/active_link_to
#=> <li class="active"><a href="https://stackoverflow.com/users">Users</a></li>
источник
Я использовал помощник, чтобы реализовать это в стиле помощников форм Rails.
В помощнике (например
app/helpers/ApplicationHelper.rb
):Затем в представлении (например
app/views/layouts/application.html.erb
):Этот пример производит (когда находится на странице "пользователи"):
источник
Используйте это вместо этого, чтобы выбрать активную ссылку в навигации на основе текущего маршрута без кода сервера:
источник
$('li.active').closest('.dropdown').addClass('active');
чтобы выделить родительское меню.Я нашел успех, используя логическое и (
&&
) в haml :источник
Для каждой ссылки:
или даже
источник
Не уверен, спрашиваете ли вы, как используется твиттер-бутстрап css или о рельсах. Я принимаю сторону рельсов.
если да, проверьте
#link_to_if
метод или#link_to_unless_current
методисточник
Сегодня у меня был тот же вопрос / проблема, но с другим подходом к решению. Я создаю вспомогательную функцию в application_helper.rb:
и ссылка выглядит так:
Вы можете заменить его
params[:action]
наparams[:controller]
и указать имя вашего контроллера в ссылке.источник
Я использую это для каждого
li
:<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>
источник
li
не былоa
Вы можете определить вспомогательный метод в
application_helper.rb
Теперь вы можете использовать как:
create_link 'xyz', any_path
который будет отображаться какНадеюсь, поможет!
источник
Вы должны сделать это сами, манипулируя классами CSS. То есть, если пользователь нажимает на какую-то ссылку, затем что-то делает (целевое действие), делает предыдущую ссылку неактивной, а новую - активной.
Если по вашим ссылкам вы попадаете на сервер (то есть перезагружаете страницу), вы можете просто правильно отобразить активную ссылку на сервере. В противном случае, если вы делаете что-то на стороне клиента (переключение панелей вкладок или что-то еще), вам придется использовать javascript.
источник
вы можете использовать tabulous для ссылок
статья здесь о том , как совместить tabulous с Twitter Bootstrap и рельсы 3.x
источник
Я написал простой вспомогательный метод с использованием вспомогательного метода построения в представлении,
current_page?
когда вы можете указать собственноеclass
имя вhtml_options
хеш-функции.Примеры (когда вы в
root_path
пути):источник
Многие из ответов здесь содержат то, что будет работать, или частичные ответы. Я объединил кучу вещей, чтобы сделать этот вспомогательный метод рельсов, который я использую:
Это можно было бы сделать еще более привлекательным с помощью проверки аргументов для поддержки
&block
в link_to и т. Д.источник
Уже много ответов, но вот что я написал, чтобы значки Bootstrap работали с активной ссылкой. Надеюсь, это поможет кому-то
Этот помощник даст вам:
Поместите это в свой application_helper.rb
И используйте ссылку:
Последний аргумент не обязателен - он добавит иконку к ссылке. Используйте имена значков глифов. Если вам нужен значок без текста:
источник
Базовый, без помощника
Я использую это, так как у меня более одного класса -
источник
Вот что я сделал:
Я создал ViewsHelper и включил в ApplicationController:
Внутри ViewsHelper я создал такой простой метод:
На мой взгляд, я делаю так:
источник
Похоже, вам нужно внедрить систему навигации. Если это сложно, это может стать довольно уродливым и довольно быстрым.
В этом случае вы можете использовать плагин, который справится с этим. Вы можете использовать navigasmic или простую навигацию (я бы рекомендовал navigasmic, потому что он сохраняет основной уровень в представлении, которому он принадлежит, а не в какой-либо конфигурации)
источник
Самый короткий код
Это касается как элементов списка навигации, так и суб-навигации. Вы можете передать любой массив по одному пути и работать с обоими.
application_helper
просмотр (html.erb)
источник
Использование рубина на Sinatra ..
Я использую голую тему начальной загрузки, вот пример кода навигационной панели. Обратите внимание на имя класса элемента -> .nav - как это указано в java-скрипте.
на странице просмотра (или частично) добавьте это: javascript, это должно выполняться каждый раз при загрузке страницы.
фрагмент просмотра haml ->
В отладчике javascript убедитесь, что значение атрибута 'href' совпадает с window.location.pathname. Это немного отличается от решения @Zitrax, которое помогло мне исправить мою проблему.
источник
тонкий
источник