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
Ти на него Vee! Но все още не работи. Няма грешки в 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
Изглежда, че хората от rails го правят по този начин с оператор 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 в моя файл с оформление като този...

app/views/layouts/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