Add a background color in the webpage
<p>Goal:<br>
When you are entering the address calculation or project.html, one of the main element in the menu should be marked with a background color based on the webpage you are entering. For instance, if you are entering calculation.html the selection named Calculation (from the menu) should be selected by having a different background color compare to others.</p>

<p>Problem:  </p>

<blockquote>
  <p>I don't know how to make a mark by having a background color once you
  have clicked the link. I would like the code to be written in jQuery.</p>
</blockquote>

<p>If possible, it would be great to add "id" in the element "a href" to change the background color.</p>

<p>The value "Project" and "calculation" from jQuery is the value of element title from the html code.</p>

<p>HTML:</p>

<pre><code>&lt;div id="nav-menu"&gt;
    &lt;ul id="kthh"&gt;
        &lt;li&gt;&lt;a href="calculation.html"&gt;Kalkylering&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="project.html"&gt;Projekt&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;  
</code></pre>

<p>Javascript: </p>

<pre><code>$(document).ready(function() 
{

var data = $('title'); 

    if(data[0].textContent == "Project")
    {
        $('#kthh').closest('li').next('li').find('a').addClass("asdd");

    }
    if(data[0].textContent == "calculation")
    {
        //$('title').html('someHTML'); 
    }

}); // ready 
</code></pre>

<p>CSS:</p>

<pre><code>/* Menu for display */

#nav-menu ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav-menu li
{
    float: right;
}

#nav-menu li a
{
    height: 70px;
    line-height: 110px;
    float: left;
    padding-left: 13px;
    padding-right: 13px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    font-family: Verdana;
    font-weight:bold;
}

#nav-menu li a:hover {  background: #AA1133;}

#nav-menu li.last-child { padding-right: 50px;}

.asdd
{
    background: #AA1133;
}
</code></pre>
