Ruby on Rails выделяет текущую ссылку на панели навигации?

Может ли кто-нибудь сказать мне, как выделить (цветом) текущую ссылку на панели навигации с помощью css? Я не хочу использовать опцию контроллера. Вот код из shared/menu.html.erb:

 <div id = "navigation">

  <ul>

  <li id="menu"><%=link_to "Menu", menus_path, :class => "menunav"%></li>
 <li id="drink"><%=link_to " Drinks", drinks_path, :class => "drinknav"%> </li>

 </ul>

 </div>

ruby-on-rails menu highlight
person blawzoo    schedule 25.09.2011    source источник
comment
Мне не совсем понятно, что вы хотите. Под current link вы имеете в виду ссылку, указывающую на текущую страницу? И что вы имеете в виду под controller option? Обычное решение, которое я бы предложил, состоит в том, чтобы позволить адаптировать ваш link_to и добавить класс current, когда он указывает на текущую страницу.   -  person nathanvda    schedule 26.09.2011

Ответы (4)


arrow_upward
3
arrow_downward

Есть несколько подходов к этому, но если вам нужен простой, я предлагаю добавить класс в ваше тело.

<body class="<%= params[:controller] %>_controller">
  ...
</body>

Затем в вашем css вы можете сделать следующее.

body.menus_controller  #navigation a.menunav,
body.drinks_controller #navigation a.drinknav {
  background-color : yellow
  color : blue
}

Это может усложниться, если у вас есть несколько страниц, которые вы хотите разделить, но для этого базового примера все должно быть в порядке.

person Matthew Rudy    schedule 25.09.2011

arrow_upward
7
arrow_downward

Первый подход заключается в обработке текущих controller_name и action_name, чтобы определить, на какой странице вы находитесь. Это хорошо, но добавляет немного серверной стороны к шаблону, специфичному для клиента. Помощник rails использует этот способ link_to_unless_current. Минимальное использование JS. См. пример здесь

Второй — разобрать $(location) и напрямую добавить определенный класс к выбранному элементу навигации, чтобы выделить его.

Третий (зависит от объекта) — создать JS-объект с текущим состоянием сущности и добавить методы для добавления класса в активную навигацию. Затем вы можете создать экземпляр этого JS-класса, передав объект и сохранив инкапсулированную логику.

person Anatoly    schedule 26.09.2011
comment
Я бы посоветовал вам не смешивать юристов функциональности JS, старайтесь, чтобы они были разделены - person Anatoly; 26.09.2011

arrow_upward
5
arrow_downward

Что-то вроде этого сработает для вас. Конечно, вам придется настроить его для своих целей, возможно, усложнить сопоставление (в настоящее время это будет соответствовать только путям, как в вашем примере).

$("#navigation a[href="+window.location.pathname+"]")
  .closest('li')
    .css('background-color', '#ff0');

Еще лучше, если вы где-нибудь определите «текущий» класс, а затем просто добавите его:

/* in some stylesheet */
#navigation li.current { background-color: #ff0; }

/* then the js */
$("#navigation a[href="+window.location.pathname+"]")
  .closest('li')
    .addClass('current');
person numbers1311407    schedule 25.09.2011

arrow_upward
1
arrow_downward

Используйте помощник Rails: link_to_unless_current

  • Простой и самый быстрый.

  • Мне нравится идея @Anatoly использовать link_to_unless_current helper, поэтому я придумал следующее решение. Скопируйте и вставьте, чтобы сэкономить время.:

Что оно делает?

  • Если страница текущая, она выполняет блок, и вы можете добавить классы CSS, необходимые для выделения этой ссылки.
  • Если страница НЕ является текущей, то она просто возвращает первую ссылку выше.

Надеюсь это поможет.

person BKSpurgeon    schedule 14.05.2020