jQuery .click() 无法正常工作

Question

我查看了其他一些关于 .click 函数不起作用的 Whosebug 问题，但其中 none 似乎对我有所帮助。我导入了 jquery 库。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

这是我的 jquery，我不确定为什么它不起作用。我有它，所以它会等到页面加载后再尝试运行。我在那个元素上有 class，但它没有注册点击。

$(document).ready(function() {
            $('nav.product-description-nav ul li a').click(function() {
                $(".product-description-nav ul").find($('li a.active-product-selection')).removeClass('active-product-selection');
                $(this).addClass('active-product-selection');
            });
        });

这是我的导航，我试图添加 classes 并在点击时删除它们。

<nav class="product-description-nav">
    <ul>
        <li><a href="#" class="active-product-selection">Overview</a></li>
        <li><a href="#">Options</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Request A Quote</a></li>
    </ul>
</nav>

我在使用 jquery 时总是遇到麻烦，我认为我正在引用所有内容，我知道如果我将该语句添加到单击时调用的函数中，删除 class 会起作用，但我不想这样做在 a 元素中具有 onclick 函数。是我的语法搞砸了还是我引用的 jquery 库有误？

这是我的问题的答案

$(document).on('click','.product-description-nav a',function(){
            $(".product-description-nav a").removeClass('active-product-selection');
            $(this).addClass('active-product-selection');
        });

Answer 1

您并不总是需要整个层次结构。您可以简单地从 nav 内的所有 a 标签中删除 class，然后将 class 添加回 this:

$(document).ready(function() {
  $('nav.product-description-nav a').click(function() {
    $("nav.product-description-nav a").removeClass('active-product-selection');
    $(this).addClass('active-product-selection');
  });
});

.active-product-selection {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav class="product-description-nav">
  <ul>
    <li><a href="#" class="active-product-selection">Overview</a>
    </li>
    <li><a href="#">Options</a>
    </li>
    <li><a href="#">Downloads</a>
    </li>
    <li><a href="#">Request A Quote</a>
    </li>
  </ul>
</nav>

jQuery .click() 无法正常工作

jQuery .click() not working properly

html

javascript

jquery

addclass

removeclass