Originariamente inviato da toro.86
io proporrei di lasciar perdere i Punti 3 e 4! e di aiutarmi con i punti 1 e 2
allora il Punto 1 funziona e ho fatto cosi:
codice:
$(document).ready(function() {
$("#navi li a").hover(function() {
$("#navi li a").fadeIn();
$("#navi li a").removeClass("active");
$("#navi li").removeClass("activeli");
});
});
per il punto 2 non ne ho idea!! cioe quando faccio mouse out vorri che ri-aggiungesse le classi precedentemente tolte!
Il mio post è arrivato dopo il tuo...
La classe active non è necessaria, puoi identificare i link all'interno della "li" attiva tramite:
#menu li.activeli a
per differenziarli da:
#menu li a
Ti posto lo script modificato:
codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hover</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var previousActive;
$(function(){
previousActive=$(#menu li.activeli');// Effetto "Memoria" di Javascript, volgarmente chiamato: "variabile"
$('#menu li').hover(function(){//mouseover
if(!$(this).hasClass('activeli')){
$('#menu li').removeClass('activeli');
$(this).addClass('activeli');
}
},function(){//mouseout
$(this).removeClass('activeli');
previousActive.addClass('activeli');
});
$('#menu li').click(function(){//click
$('#menu li').removeClass('activeli');
$(this).addClass('activeli');
previousActive=$(this);
});
});
</script>
<style type="text/css">
#menu li a{
color:#333; /*voci di menu non attive*/
}
#menu li.activeli a{
color:red; /*voci di menu attive*/
}
.activeli{
background:grey;
}
</style>
</head>
<body>
<ul id="menu">
[*]Link
<li class="activeli">Link
[*]Link
[*]Link
[*]Link
[*]Link
[*]Link[/list]
</body>
</html>
Ovviamente se i link nel menu portano ad altre pagine puoi evitare di gestire l'evento click associato.
Ciao