JavaScript:将类添加到单击<a>并删除所有具有特定标记的元素

javascript: add class to <a> which is clicked and remove all elements with specific tag

本文关键字：元素 删除 添加 单击 JavaScript      更新时间：2023-09-26

好的，所以我有一个导航侧边栏，我希望当单击链接时，.clicked 类被添加到单击的链接中，并且 .clicked 类从所有其他标签中删除，如果 .clicked 类的其他标签。这是我的JavaScript

$('#sidebar ul a').click(function(){
    $('#sidebar ul .clicked').removeClass('.clicked');
    $(this).addClass('clicked');
});

这是我的 CSS

.clicked {
    background: url(../images/liHover.png) no-repeat;
    background-position: -5px 0px;
    color: white;
}

这是我的 HTML

<body>
    <div id="sidebar">
        <div id="sidebarHeader">
            <h1>top</h1>
        </div>
        <ul>
            <a href="#"><li>First</li></a>
            <a href="#"><li>Second</li></a>
            <a href="#"><li>Third</li></a>
            <a href="#"><li>Fourth</li></a>
        </ul>
        </div>
</body>

但它似乎不起作用。当我单击链接/

  • 时，它确实添加了类，但它不会从其他元素中删除 .clicked 类。知道为什么吗？

    • 你的html对初学者无效，试着把li放在列表中的第一位

            <li><a href="#">First</a></li>
        // repeat for other items

    你的jQuery也是无效的，你缺少'#sidebar'引用ID元素的主题标签

    最后，你的 jQuery 函数removeClass不需要在类removeClass('clicked');之前有一个句点

    首先，

    您的代码是否包装在其中 

    $(document).ready(function() {
});

    或 

    $(function() {
});

    否则，您的代码可能在 DOM 准备就绪之前执行，在这种情况下，它将无法正确绑定。

    下一个 

    $('sidebar ul a')

    应该是 

    $('#sidebar ul a')

    和 

    $('sidebar ul .clicked').removeClass('.clicked');

    应该是

    $('sidebar ul .clicked').removeClass('clicked');

    在CSS方面，背景不会显示在链接上，除非你设置了display：block并给它一个宽度。最后，括号内的图像URL应该用引号引起来，正如前面的海报所说，背景位置应该是"背景"的一部分，因为它是一个快捷方式。

    可能是

    因为内联
    中的 a 标记如果你试着把它像一块块一样放 

    #sidebarHeader{
  display:block;
}

    您应该从元素中删除单击的喜欢这个 

      $('sidebar ul a').removeClass('.clicked');
    相关文章：