Question

I have a horizontal menu on a page like this

<link rel="stylesheet" type="text/css" href="/classified/siteassets/css/mymenu.css" />
<div id="content-container">
<ul>
    <li><a href="http://mysite/Classified/Pages/Training.aspx">Training</a></li>
    <li><a href="http://mysite/Classified/Pages/Briefing.aspx">Briefing</a></li>     
    <li><a href="http://mysite/Classified/Pages/Resources.aspx">Resources</a></li>
</ul>
</div>

The menu is styled like this:

#content-container {
    font-family: "Trebuchet MS", Verdana, serif;
    width:100%;
    margin:0 auto;
    padding:0;
}    
#content-container ul {
    border-bottom: 18px solid #C93;
    list-style: none;
    margin:0 -10px;;
    padding-bottom: 1px;
    overflow: visible;
    width:98%;
}    
#content-container ul li {
    float: left;
    padding:0;
    margin:0;
    text-align: center;
    width: 14.25%;
}    
#content-container ul li a {
    border-left: 1px #fff solid;
    line-height:36px;
    text-decoration:none;
    color:#ddd;
    background-color:#2E4B68;
    display:block;
    font-size:1.5em;

}
#content-container ul li a:hover {
    background-color: #C93;
    color:#000;
}

What I need to do is when one of the link is clicked the respective page opens, i need to have the same color on the menu tab that opened as its hover color. I need to do that by finding which page opened by checking the url using javascript and setting the background color of that li item dynamically using jquery to the same as its hover color so users know that’s what is currently opened page. How do i do this?

Answer 1

Try this

$(document).ready( function() {
    $("#content-container ul li a").each(function(i, item) {
        if($(item).attr("href") == window.location) {
            $(item).css("background-color, #c93");
        }
    });
});