Question

我已经查看了一些关于.click函数无法正常工作的其他stackoverflow问题，但它们似乎都没有帮助我。我有我的jquery库的导入。

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

这是我的jquery，我不知道为什么这不起作用。我有它所以它等待页面加载尝试运行。我在该元素上有类，但它没有注册点击。

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

这是我的导航，我试图将这些类添加到单击中并将其删除。

<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问题而且我认为我正在引用一切正常我知道如果我将该语句添加到一个单击调用的函数但我不希望在一个元素中有onclick函数的remove类。我的语法是乱糟糟的还是我引用jquery库错了？

这是我的问题的答案

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

Answer 1

您根本不需要整个层次结构。您只需从a中的所有nav标记中删除该类，然后将该类添加回this：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery .click（）无法正常工作

1 个答案: