So, I'm developing a web page and I wrote a little jQuery but I think it is really redundant.
The structure is simple: 3 divs positioned beneath each others. 2 of them begin on display none, so if you click on its menu item, the div will appear and the others disappear (so you can navigate through 3 pages in only one page). There's also an active menu that changes.
But I could only do it by repeating a lot of lines and being a lot obvious.
<script type="text/javascript">
$(document).ready(function() {
$(".baile").click(function() {
$("#baile").fadeIn(300);
$("#home, #movimento, #contato").fadeOut(300);
$('a[title|="O Baile"]').addClass("hoverMenu");
$('a[title|="Movimento Benedito"]').removeClass("hoverMenu");
$('a[title|="Contato"]').removeClass("hoverMenu");
});
$(".movimento").click(function() {
$("#movimento").fadeIn(300);
$("#home, #baile, #contato").fadeOut(300);
$('a[title|="Movimento Benedito"]').addClass("hoverMenu");
$('a[title|="Contato"]').removeClass("hoverMenu");
$('a[title|="O Baile"]').removeClass("hoverMenu");
});
$(".contato").click(function() {
$("#contato").fadeIn(300);
$("#home, #baile, #movimento").fadeOut(300);
$('a[title|="Contato"]').addClass("hoverMenu");
$('a[title|="Movimento Benedito"]').removeClass("hoverMenu");
$('a[title|="O Baile"]').removeClass("hoverMenu");
});
$("#logo").click(function() {
$("#home").fadeIn(300);
$("#baile, #movimento, #contato").fadeOut(300);
$('a[title|="Movimento Benedito"]').removeClass("hoverMenu");
$('a[title|="Contato"]').removeClass("hoverMenu");
$('a[title|="O Baile"]').removeClass("hoverMenu");
});
});
</script>