Question

I want the active link on the page to have a solid bg color. I think i need jQuery to do this. I tried this code, but it doesn’t work..

<script type="text/javascript">
$(document).ready(function(){
$("#navigation").each(function(){
    if($(this).attr('href') == document.URL){
        $(this).css("background-Color", "#e9fd99");
    }
});
});
</script>

See my picture for clarification:

As you can see — depending on which page you’re on the link will a solid BG color that stays static..

———————–UPDATE————————-

HTML code:

<div id="navigation">
<div class="sb_pos">
<ul id="red" class="treeview-red">

<li class="open">
    <span class="tree_titles">About</span>
    <ul>


        <li><span><a href="?page=about_getting_started">Getting Started</a></span></li>
        <li><span><a href="?page=about_recruiting_process">Recruiting Process</a></span></li>
        <li><span><a href="?page=about_responsibility">Responsibility</a></span></li>
        <li><span><a href="?page=about_opportunity">Opportunity</a></span></li>

Answer 1

You can do it with only css if you want. Give the body of each page a unique id, for example about, contact, tags, etc. Then give each link a unique id, aboutlink, contactlink, tagslink, etc.

Then in your css, write the style:

body#about a#aboutlink,
body#contact a#contactlink,
body#tags a#tagslink {
    background-color: #e9fd99;
}