#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.