在 Rails 中單擊時無法更改 li 元素的類

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

現在我想刪除現有的“活動”類並將“活動”類添加到點擊的 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

您應該收聽page:change事件，因為您正在使用 turbolinks：

$(document).on('page:change', function () {
  $('.nav li a').click(function(e) {
    ...

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()