Question

所以在我的rails应用程序中，我试图让它当用户点击菜单中的链接时，该链接变为下划线以表明它是当前页面。我使用javascript和css进行了基本设置，但我无法使addClass()和removeClass()函数正常工作。

现在，active链接下划线很好，但是当单击另一个链接时，活动类不会传输（尽管链接似乎闪烁）。任何帮助将不胜感激！

菜单HTML

<div id="collective_tabs">
  <ul>
    <li>
      <%= link_to 'Projects', collective_projects_path(@collective) %>
    </li>
    <li>
      <%= link_to 'Members', collective_members_path(@collective) class: 'active' %>
    </li>
  <ul>
</div>

CSS

.active {
  border-bottom: 1px solid;
}

的application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require chosen-jquery
//= require messages
//= require bootstrap
//= require turbolinks
//= require_tree .

$(document).ready(function() {
    $('#collective_tabs li a').on('click', function(){
        $('li a.active').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 1

在这里完美运作：

http://jsfiddle.net/kez5zwgq/

确保在HTML中定义了“a”标记;）

HTML

<div id="collective_tabs">
 <ul>
   <li>
    <a>potato</a>
   </li>
   <li>
    <a class="active">tomato</a>
   </li>
 <ul>
</div>

您可能需要考虑使用以下CSS：

CSS

.active {
   text-decoration: underline;
}

使用Javascript单击添加和删除类

1 个答案: