Question

我的网站旁边有一个导航栏，但问题是当我更改导航栏中的标签时，活动类不会更改，这是我的代码

 <!DOCTYPE html>
<html>
<body style="background-color:yellow">

<font color="red"><div align="center"><h1>About</h1></div></font>
<head>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #875050;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
 </style>
</head>
<body>
<ul>
  <li><a class="active" href="prodject.htm">Home</a></li>
  <li><a href="prodject1.htm">News</a></li>
  <li><a href="prodject2.htm">Contact</a></li>
  <li><a href="prodject3.htm">About</a></li>
</ul>

</body>
</html>

这是我的java脚本代码

$(".nav li").click(function() {
    if ($(".nav li").removeClass("active")) {
        $(this).removeClass("active");
    }
    $(this).addClass("active");
});

有没有办法解决这个问题

Answer 1

您在HTML

中没有nav课程

<ul class="nav">
   <li><a class="active" href="prodject.htm">Home</a></li>
</ul>

您不需要if，请直接在方法中使用选择器。

$(".nav li").click(function() {
    $(".nav li.active").removeClass("active");
    $(this).addClass("active");
});

OR，

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

Answer 2

你的dom树中没有导航类。使用nav值添加到ul元素类属性：

<ul class="nav"></ul>

Answer 3

确保你也有这些标签的class属性，但也许你定位一个标签而不是导航li

$("a").click(function() {
    $(this).siblings("active").removeClass("active");
    $(this).addClass("active");
});

Answer 4

您没有将nav类添加到ul标记，请使用此代码<ul class="nav"></ul>并在jquery代码下使用jquery进行更改。

$(".nav li").click(function() {
    $(".nav li.active").removeClass("active");
    $(this).addClass("active");
});

你如何在html中更改活动类

4 个答案: