Как получить Twitter-Bootstrap навигацию, чтобы показать активную ссылку? - PullRequest
105 голосов
/ 27 марта 2012

Я не понимаю, как Twitter Bootstrap делает активные ссылки для навигации.Если у меня есть обычная навигация, подобная этой (со связыванием 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>

Как мне сохранить его активным на основании нажатой ссылки?

Ответы [ 22 ]

0 голосов
/ 22 марта 2016

Кратчайший код

Это касается ОБА и элементов списка навигации. Вы можете передать массиву только один путь и иметь дело с обоими.

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>
0 голосов
/ 27 марта 2012

Похоже, вам нужно внедрить систему навигации. Если он сложный, он может быть довольно уродливым и довольно быстрым.

В этом случае вы можете использовать плагин, который может справиться с этим. Вы можете использовать navigasmic или простая навигация (я бы порекомендовал navigasmic, потому что он сохраняет основной слой в виде, где он принадлежит, а не в какой-то конфигурации)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...