Добавить класс к элементу навигации после его выбора

У меня настроена навигация так:

<ul class="nav nav-pills">
  <li><a href="/questions/all">All</a></li>
  <li><a href="/questions/popular">Popular</a></li>
  <li><a href="/questions/fun">Fun</a></li>
</ul>

При нажатии на один из них он сопоставляется с моим маршрутом Sinatra (т.е. get '/questions/:filter' do...). Щелчок по любому из них обновляет страницу, но все они по-прежнему используют одно и то же представление .erb.

Я пытаюсь понять, как применить класс "active" к элементу навигации <li>, который просматривается в данный момент. Таким образом, элемент навигации будет выделен, чтобы пользователи знали, в каком представлении они находятся (без необходимости смотреть на фактический URL-адрес).

Любая помощь приветствуется. У меня есть доступ к jQuery, если это необходимо.


javascript jquery css sinatra
person tonic    schedule 30.11.2012    source источник

Ответы (5)


arrow_upward
5
arrow_downward

Вы можете использовать переменную window.location.pathname для выбора тега привязки.

$('a[href="' + window.location.pathname + '"]').addClass('active')
person Trent Earl    schedule 30.11.2012
comment
ах, круто. мне нужно добавить класс в ‹li›, а не в ‹a›. не уверен, как именно это сделать. по сути, мне нужно найти li, соответствующий этому пути, чтобы добавить класс. - person tonic; 01.12.2012
comment
это гениально! Я никогда не думал делать это на клиенте, не говоря уже о том, чтобы так элегантно! - person Dmitry; 12.12.2012

arrow_upward
2
arrow_downward

Используя jQuery, вы можете добавить класс, чтобы указать, что он активен:

$(this).addClass('active');

Замените (это) любым элементом div, который вы хотите добавить в класс. Это позволит вам затем стилизовать на основе идентификатора класса div.

person Sinbu    schedule 30.11.2012
comment
я нашел эту функцию, но я не уверен, когда на самом деле сделать этот вызов. я только хочу добавить класс к элементу навигации, который соответствует текущей странице в представлении. - person tonic; 30.11.2012
comment
Благодарю. Я на самом деле закончил тем, что добавил уникальный идентификатор к каждому элементу ‹li›, а затем использовал jquery, чтобы выбрать соответствующий, чтобы добавить класс. - person tonic; 01.12.2012

arrow_upward
0
arrow_downward

Попробуй это:

$(document).ready(function () {
   $('.nav a[href="' + window.location.pathname + '"]').addClass('active')
 });
person Anujith    schedule 30.11.2012
comment
ах, это добавляет активный класс к ‹a› вместо соответствующего ‹li›, поэтому, к сожалению, это не работает. - person tonic; 01.12.2012

arrow_upward
0
arrow_downward

Зная, что ваше представление каждый раз обслуживается вашим веб-приложением sinatra, я предлагаю вам добавить в него логику с помощью переменной и простого оператора if. Вид (в php):

<ul>
<?php
  $filters = array("all", "popular", "fun");
  foreach($filters as $filter):
?>

<li>
<a href="/questions/<?php echo $filter; ?>"
  <?php if ($filter == $currentfilter) { ?>class="active"<?php }; ?>>
  <?php echo $filter; ?>
</a>
</li>

<?php endforeach; ?>
</ul>

Важно, чтобы ваше представление обслуживалось напрямую. В javascript не входит добавление класса на активную страницу, если вы не используете навигацию на основе javascript (полную ajax и т. д.).

person y_nk    schedule 30.11.2012

arrow_upward
0
arrow_downward

Если вы перезагружаете страницу, вы можете использовать ruby ​​в шаблоне erb, чтобы добавить класс в тег li, если текущий маршрут соответствует связанному с тегом li якорю href.

В контроллере:

...
@body_class = "page2"
@nav_links = ['page1', 'page2', 'page3']
...

В шаблоне представления:

<body class="<%= @body_class %>">
...
<ul class="nav">
    <% @nav_links.each do |link| %>
        <li <% if link.eql?(@body_class) %>class="selected"<% end %>><a href="<%= link %>"><%= link %></a></li>
    <% end %>
</ul>
...
</body>

Если вы хотите использовать только текущий URL и пропустить контроллер:

<ul class="nav">
    <li class="<% if request.fullpath.eql?('/this/items/endpoint') %>selected<% end %>"><a href="/this/items/endpoint">Page 1</a></li>
</ul>
person alxklo    schedule 30.11.2012
comment
я использую ruby, но не совсем уверен, как это сделать — звучит как хороший план. - person tonic; 01.12.2012