Bootstrap активная кнопка и рельсы

У меня есть приложение Rails 4 с навигационным меню начальной загрузки. HTML выглядит как...

<ul class="nav">
<li>
<a href="/tickets">Tickets</a>
</li>
<li>
<li>
<li>
<li>

... и я хотел бы сделать это с помощью javascript с чем-то вроде...

приложение/активы/javascripts/application.js

  $('ul li').click( function() {
    $(this).addClass('active').siblings().removeClass('active');
  });

...но не рабочий! Что мне не хватает?

РЕДАКТИРОВАТЬ

Измените JS на

$(document).ready(function() {
  $('ul li').click( function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

ruby-on-rails ruby-on-rails-4
person Mark Locklear    schedule 03.04.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Поместите код javascript в документ готов:

$(document).ready(function() {
  $('ul li').click( function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

Обновление: с делегированием событий, чтобы событие щелчка выполнялось для измененных элементов:

$(document).ready(function() {
  $('ul.nav').on('click', 'li', function(evt) {
    $(this).removeClass('active').siblings().addClass('active');
  });
});
person vee    schedule 03.04.2014
comment
Ты на ней Ви! Но до сих пор не работает. Нет ошибок в консоли JS. Добавил ваше редактирование выше. - person Mark Locklear; 03.04.2014
comment
@Lumbee, что не работает? classes не добавлено/не удалено? Сначала попробуйте просто $(this).addClass('active'), это должно дать вам некоторую подсказку. - person vee; 03.04.2014
comment
Да, похоже, что класс просто не установлен. Буду продолжать смотреть и отписываться. Я могу вручную установить класс на отдельный li и увидеть активный результат. - person Mark Locklear; 03.04.2014
comment
@Lumbee, попробуйте удалить, а затем добавить: $(this).removeClass('active').siblings().addClass('active'); - person vee; 03.04.2014
comment
Я думаю, что проблема может быть в $('ul li').click. Когда я делаю это pastie.org/8992322, я получаю предупреждение только при первом нажатии, и больше ничего. Вот источник pastie.org/8992344. - person Mark Locklear; 04.04.2014
comment
Проблема должна быть связана с делегированием события, если оно работает только в первый раз. Вы где-нибудь заменяете содержимое nav javascript? Я добавлю код с делегированным событием click, чтобы вы попробовали. - person vee; 04.04.2014
comment
Похоже, разработчики рельсов делают это таким образом с оператором if в макете pastie.org/8992361. - person Mark Locklear; 04.04.2014
comment
Это должно быть хорошо, потому что вы будете выполнять этот javascript на клиенте после того, как этот erb отобразится. - person vee; 04.04.2014

arrow_upward
0
arrow_downward

Я не смог заставить JS работать. Я использовал операторы if в моем файле макета следующим образом...

приложение/представления/макеты/application.html.erb

 <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="/"><%= image_tag("logo-mini.png", :alt => "Tech Logo") %></a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="<%= 'active' if current_page?(tickets_path) %>"><%= link_to "Tickets",
                                      tickets_path %></li>
              <li class="<%= 'active' if current_page?(instructors_path) %>"><%= link_to "Instructors",
                                      instructors_path %></li>
              <li class="<%= 'active' if current_page?(tutors_path) %>"><%= link_to "Tutors", tutors_path %></li>
              <li><%= link_to "Log Out", logout_path %></li>
              <li><%= link_to "About", '/about' %></li>
          </ul>
          </div>
      </div>
    </div>
  </div>
person Mark Locklear    schedule 04.04.2014