Question

好吧所以我有一个导航边栏，我想要它，这样当点击一个链接时，.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>

但它似乎不起作用。当我点击链接/＆lt; li>它确实添加了类，但它不会从其他元素中删除.clicked类。知道为什么吗？

Answer 1

你的html对初学者无效，请尝试将li放在列表中

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

你的jquery也无效，你错过了标签'#sidebar'来引用id元素

最后你的jquery函数removeClass在课程removeClass('clicked');之前不需要一段时间

Answer 2

首先，

您的代码是否包含在

中

$(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应该在引号中，并且如前面的海报所述，背景位置应该是“背景”的一部分，因为它是一个快捷方式。

Answer 3

可能是因为内联的标签如果你试着把它像块一样

#sidebarHeader{
  display:block;

}

并且您应该从元素中删除单击的内容像这样

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

javascript：将课程添加到<a> which is clicked and remove all elements with specific tag</a>

3 个答案: