I've created a menu that is stacked on top, with the "Representaciones" section shown on the same page below a welcome image. However, when I click on it, everything works fine but if I refresh the page, the "selected" class disappears from "representaciones" and shows up on "home". I'm struggling to make it work consistently, any help would be appreciated.
<div id="menu">
<ul>
<li>
<a href="index.php" class="selected">HOME</a>
</li>
<li>
<a href="#representaciones">REPRESENTACIONES</a>
</li>
<li>
<a href="productos.html" target="_parent">PRODUCTOS</a>
</li>
<li>
<a href="eventos.html" target="_parent">EVENTOS</a>
</li>
<li>
<a href="contacto.php" target="_parent">CONTACTO</a>
</li>
</ul>
</div>
css
#menu{
padding-left:225px;
margin: 0 auto;
position:absolute;
width:900px;
height:142px;
background-color:#f6f6f6;
}
#menu ul li a {
text-align:center;
float:left;
list-style: none outside none;
font-weight:200;
color: #919ca1;
font-size:20px;
text-decoration:none;
padding-top:60px;
}
#menu ul li a:hover{
color: #f6f6f6;
background-color:#d3242c;
padding: 61px 40px 61px 40px;
}
#menu ul li a.selected{
color: #f6f6f6;
background-color:#d3242c;
padding: 61px 40px 61px 40px;
}
jquery code snippet:
$(document).ready(function () {
$('#menu li a').click(function () {
$('#Menu ul li a').removeClass('selected');
$(this).addClass('selected');
});
});