Question

我目前在application.html.erb

中包含以下内容

  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'customjsFile', 'data-turbolinks-track' => true  %>

并将我的javascript'customjsFile'放在'/ app / assets // javascripts'文件夹中。

  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="http://localhost:3000/home" onclick="f1()">HOME</a></li>
      <li><a href="http://localhost:3000/contests">CONTESTS</a></li>
      <li><a href="http://localhost:3000/professors">PROFESSORS</a></li>
      <li><a href="http://localhost:3000/challenges">BLOG</a></li>
        <li><a href="http://localhost:3000/about">ABOUT</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

现在我想删除现有的“active”类，并将“active”类添加到单击的li元素中。我在customjsFile中添加了以下代码

$(document).ready(function () {
    $('.nav li a').click(function(e) {
        alert("Clicked");
        $('.nav li').removeClass('active');

        var $parent = $(this).parent();
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
    });
});

但点击'li'元素时，它不会被重定向到'a'标签的'href' 我尝试将以下代码添加到customjsFile.js

$(document).on("click", "a", function(){
    window.location.href = $(this).attr('href');

});

然后我被重定向到点击的'a'元素的'href'，但我的活跃类不会更改为点击的'li'而是保持相同

Answer 1

你应该听<output>事件，因为你正在使用turbolinks：

page:change

Answer 2

执行：$('.nav li').removeClass('active');时，表示您选择了包含类名nav且包含<li>的所有元素，并从中删除了类名active

我怀疑您需要的是仅从当前点击的元素中删除类名active，因此请使用$(this)：

 $(document).ready(function () {
        $('.nav li a').click(function(e) {
            e.preventDefault();
            var $parent = $(this).parent();
            $parent.removeClass('active');

});

注意：不要忘记阻止锚的默认行为。我认为你的li元素除了active之外应该有一个初始的类名。另请阅读.toggleClass()

在rails中单击它时无法更改li元素的类

2 个答案: