Question

我正在尝试将一个类添加到包含导航链接的li元素中，并且在使用null href时它可以正常工作，但只要我实际添加链接就会停止工作。

$(document).ready( function () {
      $('#menu li').click(function() {
            $('li.selected').removeClass('selected');
            $(this).addClass('selected');
     });
 });

<ul id="menu">
                <li class="menu-item selected"><a href="#">Home</a></li>
                <li class="menu-item "><a href="#">History</a></li>
                <li class="menu-item "><a href="#">Language</a></li>
</ul>

我将null href（＃）更改为home.html，history.html＆amp; language.html没有添加类。

我认为这是因为它在实际点击链接时丢失了第一次点击事件（addclass）。

如何在点击链接时保留li课程？

Answer 1

这不起作用。您需要更新策略才能使其正常运行。

代替href和data-href属性。请注意，它也可以是任何其他数据属性

<li class="menu-item selected"><a data-href="home.html" href="javascript:void(0);">Home</a></li>

现在，更新您的javascript。

$('#menu li').click(function() {
            $('li.selected').removeClass('selected');
            $(this).addClass('selected');
            var dataHref = $($(this).find("a")[0]).attr('data-href');
            if (dataHref !== undefined) {
                window.location.href = dataHref;
            }
     });

<强>释

我们有包含锚元素的li元素的绑定。当我们点击li时会发生什么，很可能你会点击锚点。

因此，首先执行锚点击，然后将事件气泡发送到触发点击的li。但是当点击到达li时，HTML中的内容发生了变化，因此，事情没有按预期工作。

所以，我们要做的就是删除锚点的href。然后将点击绑定到li元素。

因此，当点击li时，它会执行HTML操作，然后检查li中是否有任何锚点。如果是，则检查该锚是否具有任何data-href属性。如果该锚具有data-href属性，请将window.location.href更改为该href。

我希望它对你有用!!

jQuery如何在列表项上使用`addClass`

1 个答案: