Question

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

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

Answer 1

您需要采用 removeClass 和 addClass 中的两个点（。）。关注Jquery document： .removeClass( [className ] )

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

Answer 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>

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

2 个答案: