javascript - how do you change a active class in html

i have a navigational bar at the side of my website but the problem is that when i change the tab in the navigational bar the active class does not change here is my code

 <!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>

and here is my java script code

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

is there any way to fix this

i have a navigational bar at the side of my website but the problem is that when i change the tab in the navigational bar the active class does not change here is my code

 <!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>

and here is my java script code

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

is there any way to fix this

Share Improve this question edited Jun 14, 2017 at 12:21 RobG 148k32 gold badges179 silver badges215 bronze badges asked Jun 14, 2017 at 12:19 unnamed 131 silver badge9 bronze badges

3 First, stop using deprecated HTML, which will interfere with your CSS. <font> is no longer valid and all styling should be done with CSS. Next, write valid HTML. The head element es before the body and you don't place div or h1 elements in the head. – Scott Marcus Commented Jun 14, 2017 at 12:21
4 You might start with valid HTML. The font element is obsolete, a head element can't be inside a body element. You can't have two bodies in a single page. – RobG Commented Jun 14, 2017 at 12:23
1 I'm voting to close this question as off-topic because the HTML is invalid and obsolete. – Rob Commented Jun 14, 2017 at 12:24
rob jun they are the same things but one may last longer i don't think you should try to close it because i am using older code.And they both do the same thing – unnamed Commented Sep 24, 2017 at 17:31

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

You don't have nav class in HTML

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

You don't need if, directly use selector with the method.

$(".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");
});

You don't have a nav class in your dom tree. Add to ul element class attribute with nav value:

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

make sure you also have the class attribute for those a tags but also maybe you target the a tag and not nav li

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

You do not have added nav class to ul tag use this code <ul class="nav"></ul> and make changes in jquery use below jquery code.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how do you change a active class in html - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)