I am a beginner in website design and am working on designing a navigation bar using this tutorial. I have two files index.html and styles.css. I am taking a slightly different approach than the tutorial (I have two
separate files instead of one). The contents are as follows .toplist ul{
list-style-type: none;
padding: 0;
margin: 0;
width: 200px;
background-color: #f1f1ff;
}
.toplist ul li a{
display: block;
padding: 8px 16px;
color: #000;
text-decoration: none;
}
.toplist ul li a .active{
background-color: #4CAF50;
color: white;
}
.toplist ul li a:hover:not(.active) {
background-color: #555;
color: white;
}
.toplist ul li a:hover {
background-color: #555;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Main Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="toplist">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
</body>
</html>
However, the part where it is supposed to show the active page in green is not working as expected. Can anyone point out whats going wrong? asked Jun 7, 2019 at 5:17
Most of your code is already set up. All you have to do is to update your style a bit to apply the green color to active links (.toplist ul li a.active instead of .toplist ul li a .active) and add some mechanism to add
active class to currently active link. Below is a sample of how to do it using Javascript. However, it will be better if you add the active class from your server. var links = document.querySelectorAll('.toplist ul li a');
links.forEach(function (element) {
element.addEventListener('click', function (e) {
// PreventDefault to prevent redirect
e.preventDefault();
links.forEach(function (element) {
element.classList.remove('active');
});
this.classList.add('active');
});
});
.toplist ul{
list-style-type: none;
padding: 0;
margin: 0;
width: 200px;
background-color: #f1f1ff;
}
.toplist ul li a{
display: block;
padding: 8px 16px;
color: #000;
text-decoration: none;
}
.toplist ul li a.active{
background-color: #4CAF50;
color: white;
}
.toplist ul li a:hover:not(.active) {
background-color: #555;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Main Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="toplist">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
</body>
</html>
Note that I also removed the .toplist ul li a:hover {
background-color: #555;
color: white;
}
style which was not needed. answered Jun 7, 2019 at 5:31
Changed .toplist ul li a.active{
background-color: #4CAF50;
color: white;
}
and
<li><a class="active" href="default.asp">Home</a></li>
.toplist ul{
list-style-type: none;
padding: 0;
margin: 0;
width: 200px;
background-color: #f1f1ff;
}
.toplist ul li a{
display: block;
padding: 8px 16px;
color: #000;
text-decoration: none;
}
.toplist ul li a.active{
background-color: #4CAF50;
color: white;
}
.toplist ul li a:hover:not(.active) {
background-color: #555;
color: white;
}
.toplist ul li a:hover {
background-color: #555;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Main Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="toplist">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
</body>
</html>
answered Jun 7, 2019 at 5:26 msbomrelmsbomrel 5236 silver badges19 bronze badges You will have to add the class "active" to the nav item that corresponds to the page you are currently editing. You can see this in their example:
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_active In your case, you want to add it like so: <ul>
<li><a class="active" href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
answered Jun 7, 2019 at 5:23 KLPKLP 4132 silver badges5 bronze badges Just add class="active" for home,then it will work. answered Jun 7, 2019 at 5:27 StackUserStackUser 4082 gold badges7 silver badges22 bronze badges
How do I add active class to UL Li?
5 Answers. jQuery var selector = '.nav li'; $(selector). on('click', function(){ $(selector). ... . Pure Javascript: var selector, elems, makeActive; selector = '.nav li'; elems = document. querySelectorAll(selector); makeActive = function () { for (var i = 0; i < elems. ... . jQuery with event delegation:. How do you make a list active in CSS?
Just add class="active" for home,then it will work.
What is active class in CSS?
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
How do you keep a link active in CSS?
The :active selector is used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.
| 
