Bootstrap活动按钮和导轨

Question

我有一个Rails 4应用程序，我有一个bootstrap导航菜单。 html看起来像......

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

...我想用javascript做类似的事情......

的应用程序/资产/ Javascript角/ 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');
  });
});

Answer 1

将javascript代码放入document ready：

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

更新：使用事件委派，以便为修改后的元素执行click事件：

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

Answer 2

我无法让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>