элегантный способ добавить класс css в частичные рельсы

У меня есть частичные данные, которые отображаются на боковой панели, как показано ниже

__side_bar_partials.html.erb

<div class="col-sm-3">
  <div class="account-left">              
    <ul>
      <li class="active"><a href="menu1">Menu1</a></li>
      <li><a href="menu2">Menu2</a></li>
      <li><a href="menu3">Menu3</a></li>
      <li><a href="menu4">Menu4</a></li>
      <li><a href="menu5">Menu5</a></li>
    </ul>
  </div>
</div>

Теперь, что мне нужно, когда я визуализирую этот фрагмент, я хочу добавить css class active, добавленный в выбранное меню

прямо сейчас я визуализирую это обычным способом

 <%= render "profile_sidebar"%>

что мне нужно включить в приведенный выше код, чтобы он добавил активный класс в выбранное меню


person uzaif    schedule 05.08.2016    source источник


Ответы (1)


Обычно у вас есть 2 варианта. Первый - проверить текущую страницу и выделить правильный вариант меню.

<div class="col-sm-3">
  <div class="account-left">              
    <ul>
      <li class="<%= 'active' if current_page?(menu1_path) %>"><a href="menu1">Menu1</a></li>
      <li class="<%= 'active' if current_page?(menu2_path) %>">><a href="menu2">Menu2</a></li>
      <li class="<%= 'active' if current_page?(menu3_path) %>">><a href="menu3">Menu3</a></li>
      <li class="<%= 'active' if current_page?(menu4_path) %>">><a href="menu4">Menu4</a></li>
      <li class="<%= 'active' if current_page?(menu5_path) %>">><a href="menu5">Menu5</a></li>
    </ul>
  </div>
</div>

Но поскольку вы ищете более элегантный способ, я бы предложил второй вариант: создание отдельного помощника для элементов списка. Решение с помощником прекрасно описано здесь.

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

person Yaro    schedule 05.08.2016
comment
спасибо за ответ, но я не хочу использовать условие if в каждом li - person uzaif; 05.08.2016
comment
@uzaif именно поэтому я предоставил второй способ;) тот, у которого есть ссылка here - person Yaro; 05.08.2016