Hello there I have this code and I want to display active links in purple. I have that in a js file however, does not seem to work as expected. I am not sure where exactly I am doing wrong. Everything else is working properly but when you clink a link it fails to highlight to purple as is in the css. I have provided the necessary code only, Anyone?
html
<html>
<head>
<link href="site.css" rel="stylesheet"> <script src="color.js"></script>
</head>
<body>
<div class="nav-container">
<ul class="navigation-menu">
<li><a href='start.php'>Home</a></li>
<li><a href='pay.php'>C2B Payments</a> </li>
<li><a href='sms.php'>C2B SMS</a></li>
<li><a href='#'>B2C Payments</a>
<ul>
<li><a href="getbtc.php"> B2C Payments</a></li>
<li><a href="payment.php"> Make Payments</a></li>
</ul>
</li>
<li><a href='bsms.php'>B2C SMS</a></li>
<li><a href='index.php'>Log Out</a></li>
</ul>
</div>
</body>
</html>
css (site.css)
.navigation-menu li.active a {
background-color: purple;
color:#fff;
}
.navigation-menu li ul {
display: none;
}
.navigation-menu li a:hover{
background-color:black;
color: white;
}
.navigation-menu li a.active {
background-color: purple;
color:#fff;
}
javascript (color.js)
$(document).ready(function(){
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
});
Aucun commentaire:
Enregistrer un commentaire