CODEWITHSUNDEEP
phpjquerycssmenu
Nitish
Nitish

Reputation: 2763

Making currently active menu not working

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>

Upvotes: 0

Views: 781

Answers (3)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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');
        }
    });
});

Upvotes: 1

Lucas Willems
Lucas Willems

Reputation: 7063

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.

Upvotes: 2

andyb
andyb

Reputation: 43823

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.

Upvotes: 0

Related Questions