AddClass('selected') on menu in shared header - php

Question

I created a menu in the header.php that will be included in each file, like index.php or contact-us.php.
The only problem, I have now, is to add selected to the selected main category in the menu.
This following code basically works until the selected page is loaded, after that, the selected attribute is removed.
Could you please help me to fix this problem?
HTML
<nav id="navigation">
<ul id="navtop">
<li class=" first has_navchild" id="Home">
Home
<ul class="submenu">
<li class=" first has_navchild">
Home
</li>
<li class=" last">
Who we are
</li>
</ul>
</li>
<li class=" has_navchild" id="Contacts">
Contacts
<ul class="submenu">
<li class=" first has_navchild">
Where we are
</li>
<li class=" last">
Contact form
</li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function () {
$('#navigation ul li').click(function(event){
event.preventDefault();
if(($(this).attr("id") === "Home"))
{
alert($(this).attr('id'));
$("#navigation ul li#Contacts").removeClass("selected");
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
alert($(this).attr('id'));
$("#navigation ul li#Home").removeClass("selected");
$("#navigation ul li#Contacts").addClass("selected");
}
});
});
Thank you for the help

Answer 1

I use this method:
$(window).load(function() {
var url = window.location;
$('#navtop a').filter(function() {
return this.href == url;
}).parents("li").addClass('selected');
});
It checks the current page loaded and automatically adds 'selected' class to its parent <li>

Answer 2

It's normal, your document ready was loaded when all is loaded, after you use an event onclick, but in fact nobody has clicked ... So nothing append.
First use this code for add good class on load :
$(document).ready(function () {
if(($(this).attr("id") === "Home"))
{
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
$("#navigation ul li#Contacts").addClass("selected");
}
});
And add your on click function after ...
$('#navigation ul li').click(function(event){
event.preventDefault();
if(($(this).attr("id") === "Home"))
{
$("#navigation ul li#Contacts").removeClass("selected");
$("#navigation ul li#Home").addClass("selected");
}
else if($(this).attr("id") === "Contacts")
{
$("#navigation ul li#Home").removeClass("selected");
$("#navigation ul li#Contacts").addClass("selected");
}
});