如何在rails中使用jquery激活链接答案

【问题标题】：How to make links active with jquery in rails如何在rails中使用jquery激活链接
【发布时间】：2017-03-30 15:01:29
【问题描述】：

我正在尝试在我的导航栏中获取一些活动链接并且失败了很多次，我做错了什么？

HTML：

<div class="navbar-links text-center hidden-xs hidden-sm">
  <%= link_to "HOME", "#one", class: "navbar-links link-home" %>
  <%= link_to "FEATURES", "#features-container", class: "navbar-link link-home" %>
  <%= link_to "TEMPLATES", "#templates", class: "navbar-links link-home" %>
  <%= link_to "CONTACT", "#map", class: "navbar-links link-home" %>
</div>

CSS：

.active-link {
  color: #C99D9A;
  transition: all 0.3s ease;
  opacity: 80%;
  border-bottom: 3px solid #C99D9A;
}

JQUERY：

$('.navbar-links a').on('click', function(){
  $('this').removeClass('.active-link');
  $(this).addClass('.active-link');
});

【问题讨论】：

您看到的确切错误是什么？
$('this').removeClass('.active-link'); 应该改为 $(this).removeClass('.active-link');。你的这个对象有单引号。
ALSO：$(this).removeClass('.active-link'); 是错误的，在 addClass/removeClass/toggleClass 中，你不要在你的类前面加上句号（'.'），$(this).removeClass('active-link'); 会正常工作

标签： jquery html css ruby-on-rails navbar

【解决方案1】：

你需要在removeClass和addClass中取两个dots(.)。关注 Jquery document：.removeClass( [className ] )

$('this').removeClass('active-link');
$(this).addClass('active-link');

【讨论】：

【解决方案2】：

$('.menu_ul li').click(function(){
  $(this).addClass('active').siblings().removeClass('active');
  //$(this).addClass('.active-link');
});

.menu_ul{
  list-style-type: none;
}
.active{
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar-links text-center">
<ul class="menu_ul">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

【讨论】：