【问题标题】：Bootstrap active button and rails引导活动按钮和导轨
【发布时间】：2014-04-04 20:43:11
【问题描述】：

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

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

...我想用 javascript 来做这件事...

app/assets/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

【解决方案1】：

将javascript代码放入document ready:

$(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');
  });
});

【讨论】：

你在它Vee！但仍然没有工作。 JS 控制台中没有错误。在上面添加了您的编辑。
@Lumbee，什么不起作用？ classes 未添加/删除？先试试$(this).addClass('active')，应该会给你一些线索。
是的，看起来课程只是没有设置。将继续查看并回帖。我可以在单个 li 上手动设置类并查看活动结果。
@Lumbee，尝试删除然后添加：$(this).removeClass('active').siblings().addClass('active');
我认为问题可能出在 $('ul li').click 上。当我这样做pastie.org/8992322 时，我只会在第一次点击时收到警报，然后什么都没有。这是来源pastie.org/8992344。

【解决方案2】：

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

【讨论】：