Patryk Michta Patryk Michta - 7 months ago 13
HTML Question

How to change the color of the active link in the menu

Here is the menu html code for the nav bar:

<nav>
<div id="menu">
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="history.html">History</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="inf.html">Information</a></li>
<li><a href="photo.html">Photos</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="links.html">Useful Links</a></li>
</ul>
</div>
</nav>


and here's the code for css :

nav{
float: left;
margin-top: 15px;
}

nav ul {
list-style: none;
margin: 0;
padding: 0px 0px 0px 0px;

}

nav li {
display: inline-block;

}

nav a {
padding: 8px 0px;
margin-right:71px;
color: #ffffff;
display: block;
text-decoration: none;
text-transform: capitalize;
font-size: 13px;
}

nav a:hover {
color: #cccccc;
}


So for example, if I am currently looking at history page, the text "History" in the navbar will be red. How can I do such a thing?

@edit: As stated in a comment, I am trying to avoid jquery.

Answer

just add active class name in the active state link.

<li><a href="index.html">Home Page</a></li>
<li><a href="history.html">History</a></li>
<li><a class="active" href="events.html">Events</a></li>
<li><a href="inf.html">Information</a></li>

And in your CSS

nav a.active {
   color: red;
}