#nav li Selected Menu Navigation Work but don't change page

[carlarrj]

Hello,

I'm trying to make a menu navigation but now that it's working it just don't change the page. When i click the page don't change but the clicked menu stays selected. What am i doing wrong?

// CSS

#nav li a:hover {
	background:#eaeaea; 
}

#nav li a.selected {
	background:#eaeaea; 
}

//JAVASCRIPT

<script type="text/javascript">
$(document).ready(function () {	
	 $('#nav li').click(function(e){
		e.preventDefault();
		$('#nav li').removeClass("selected");
		$(this).addClass('selected');
	});
});
</script>

// HTML + PHP

<ul id="nav">
        <li><a href="?mod=colecao"><h3><?=lg_colecao?></h3></a></li>
        <li><a href="#"><h3><?=lg_lookbook?></h3></a></li>
        <li><a href="?mod=empresa"><h3><?=lg_empresa?></h3></a></li>
        <li><a href="?mod=downloads"><h3><?=lg_downloads?></h3></a></li>
        <li><a href="?mod=noticias" class="noticias"><h3><?=lg_noticias?></h3></a></li>
        <li><a href="?mod=contactos" class="contactos"><h3><?=lg_contactos?></h3></a></li>
    </ul>

<div class="contents">
	 <?php include("mod/".$mod.".php"); ?>
</div>

Can anyone help me out? Thanks in advance

[jscheuer1]

Using e.preventDefault() directs that the default action of clicking will not occur. In this case that default would be firing the link. It doesn't happen.

Remove that line:

<script type="text/javascript">
$(document).ready(function () {	
	 $('#nav li').click(function(e){
		e.preventDefault();
		$('#nav li').removeClass("selected");
		$(this).addClass('selected');
	});
});
</script>

And it will now work as expected. However, because you will now be moving/reloading (to) a new page, you need some other method for maintaining which li will have the selected class. PHP would probably be your best choice there. Check the $_GET['mod'] value and use it to assign the selected class to the appropriate li element.