您如何更改将一个班级上的班级删除并移至另一个班级上

Question

因此，我正在为我的网站侧面的导航栏编写代码，并且正在创建它，以便您单击li ，它的内部是一个没有href属性a标签，因此它的作用类似于按钮（不要使用#因为它会跳到页面顶部，并且我不希望这样），它下方有一个下拉部分，可将其他标签向下推。 我在网上找到的是

$('li').click(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});

要么

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active')
});

（以及其他变化）

但是，在我对此进行了几次测试之后，要么向每个li添加多个类，要么尝试将活动类更改为id ，我就没有运气了。

编辑：看起来该代码在其他测试网站（codepen / jsfiddle）中可以正常工作，但是当我打开VisualStudio模拟器时（在实际的浏览器窗口中打开）它似乎无法在我自己的浏览器中工作

这是包含此导航栏的我的代码： http : //codepen.io/PorototypeX/pen/sjDBL

Answer 1

这可能会有所帮助：

   $("ul.navbar > li").click(function () {
        $("li[.active]").removeClass('active');
        $(this).addClass('active');
    });

Answer 2

实际上，您的代码很好 ，但是似乎您正在使用JQuery，它本身并不是JS的本机部分，而是使用JS。 因此，首先您需要加载JQuery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

然后尝试这段代码，它与您所做的相同，但有所不同：

    $(".navbar > li").click(function () {
      $(".navbar").children("li").removeClass("active");
       $(this).addClass('active');;                      
    });

JS小提琴

Answer 3

没有在页面中添加jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

演示： CodePen

---

另一个问题可能是代码不在dom ready处理程序中

jQuery(function () {
    $("ul.navbar > li").click(function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });
})

演示： 小提琴

Answer 4

我发现我的jquery有什么问题。 尽管代码可以在外部源（如codepen和jsfiddle）上完美运行，但在本地服务器上运行的唯一方法是改为使用以下代码：

    $(document).ready(function () {
        $("ul.navbar > li").click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        });
    });

$(document).ready(function() { remaining code goes here... })允许它在本地运行。