I have a menu.php as below :
<?php $menu =
'<div id="menu">
<ul>
<a href="home.php"><li>HOME</li></a>
<a href="about.php"><li>ABOUT</li></a>
<a href="works.php"><li>WORKS</li></a>
<a href="clients.php"><li>CLIENTS</li></a>
<a href="contact.php"><li>CONTACT</li></a>
</ul>
</div>';
?>
Now I want to make the background and font color same as when I hover the list. For this I have added a jQuery to add a class called active, but its not working ! My jquery and CSS:
$(document).ready(function() {
$('#menu ul li').click(function(){
//alert('Active');
$(this).parent().find('li.active').removeClass('active');
$(this).addClass('active');
});
});
CSS :
#menu li:hover
{
background:#ffca00;
color:#2e2f34;
padding:16px 12px;
}
#menu li.active
{
background:#ffca00;
color:#2e2f34;
padding:16px 12px;
}
Whats wrong ? is my jquery is wrong?
UPDATE:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(document).ready(function () {
$('#menu ul li').click(function () {
$(this).parent().parent().find('.active').removeClass('active');
a//lert(this);
$('#menu ul li').addClass('active');
});
});
</script>
<style>
#menu
{
width:450px;
margin-left:400px;
background:#000;
}
#menu ul
{
padding:18px;
}
#menu li{
display:inline;
list-style:none;
padding:18px 12px;
text-transform:uppercase;
}
#menu a
{
color:#FFF;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size:14px;
text-decoration:none;
}
#menu li:hover {
background:#ffca00;
color:#2e2f34;
padding:16px 12px;
}
.active {
font-weight:bold;
background:#ffca00;
color:#2e2f34;
padding:16px 12px;
}
</style>
</head>
<body>
<div id="menu">
<ul> <a href="activemenu.html"><li>HOME</li></a>
<a href="activemenu2.html"><li>ABOUT</li></a>
<a href="activemenu3.html"><li>ABOUT</li></a>
</ul>
</div>
</body>
</html>
Working Demo http://jsfiddle.net/XEy4s/
$(this).parent() is a tag but we need ul tag so we use $(this).parent().parent()
$(document).ready(function () {
$('#menu ul li').click(function () {
$(this).parent().parent().find('.active').removeClass('active');
$(this).addClass('active');
});
});
New jS code
$(document).ready(function () {
loc = $(location).attr('href');
var n = loc.split("/");
var n1 = loc.split("/").length;
var on_page = n[n1 - 1];
var new_page = on_page.split("?");
$('#menu ul a').each(function () {
if ($(this).attr('href') == new_page[0]) {
$(this).find('li').addClass('active');
}
});
});
It's not $(this).parent().find('li.active').removeClass('active');
but $(this).parent().parent().find('li.active').removeClass('active');
So the full jquery code is :
$(document).ready(function() {
$('#menu ul li').click(function(){
$(this).addClass('active').parent().parent().find('li.active').removeClass('active');
return false;
});
});
But, maybe, you want to change of page, keeping the active class to your li. And in this case, it's not jquery but php that you have to use.
The jQuery is correct, but the HTML is invalid. It should be:
<ul>
<li><a href="home.php">HOME</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a href="works.php">WORKS</a></li>
<li><a href="clients.php">CLIENTS</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
With your current HTML, $(this).parent() will select the <a> parent of the <li> clicked on, and $(this).parent().find('li.active') will only ever find <li> with class="active" elements inside the clicked element. Whereas you want to find li.active starting at the the <ul>.
Changing the HTML will make the jQuery $(this).parent() find the parent <ul> and the remaining jQuery will work as expected.