使用Javascript单击添加和删除类

Adding and Removing Classes on click with Javascript

本文关键字：删除 添加 Javascript 单击 使用      更新时间：2023-09-26

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

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

菜单网页 

<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;
}

应用.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');
    });
});

在这里完美运行：

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;
}
相关文章：