elimina aggiungi classi

**toro.86** · 22-11-2012, 13:24

ragazzi sto impazzendo!

mi server una funzione jQueary per il mio menu di navigazione che faccia le seguenti cose:

1 quando faccio mouse over (su di un qualsiasi elemento "li" che non ha le classi .active .activeli) mi elimina le classi .active .activeli .

2 se faccio mouse over sull'elemento "li" che ha le classi .active .activeli, non eseguo il punto 1

3 se faccio mouse out ripristina le classi .active .activeli, (solo se erano state eliminate)

4 se clicco su un elemento "li" mi aggiunge le classi .active e .activeli

potete postarmi qualche soluzione?
Grazie

**cavicchiandrea** · 22-11-2012, 14:31

Sicuro che sia comprensibile? Ma... ci trovo diverse contraddizioni, e sopratutto jquery e js non ha un effetto memoria (devi usare i cookie) per questo passaggio (3 se faccio mouse out ripristina le classi .active .activeli, (solo se erano state eliminate)) comunque operazione non facile anche senza cookie, inizia con lo studiare un po jquery e a scrivere il codice, poi ti si da una mano

**toro.86** · 22-11-2012, 15:03

Originariamente inviato da cavicchiandrea
Sicuro che sia comprensibile? Ma... ci trovo diverse contraddizioni, e sopratutto jquery e js non ha un effetto memoria (devi usare i cookie) per questo passaggio (3 se faccio mouse out ripristina le classi .active .activeli, (solo se erano state eliminate)) comunque operazione non facile anche senza cookie, inizia con lo studiare un po jquery e a scrivere il codice, poi ti si da una mano

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!

**lucavizzi** · 22-11-2012, 15:31

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.active, #menu li.activeli');// Effetto "Memoria" di Javascript, volgarmente chiamato: "variabile"   :zizi: 
	$('#menu li').hover(function(){//mouseover
		if(!$(this).hasClass('active activeli')){
			$('#menu li').removeClass('active activeli');
			$(this).addClass('active activeli');
		}
	},function(){//mouseout
		$(this).removeClass('active activeli');
		previousActive.addClass('active activeli');
	});
	$('#menu li').click(function(){//click
		$('#menu li').removeClass('active activeli');
		$(this).addClass('active activeli');
		previousActive=$(this);
	});
});
</script>
<style type="text/css">
.active{
	color:red;
}
.activeli{
	background:grey;
}
</style>
</head>

<body>
<ul id="menu">
	[*]Link
	<li class="active activeli">Link
	[*]Link
	[*]Link
	[*]Link
	[*]Link
	[*]Link[/list]
</body>
</html>

**lucavizzi** · 22-11-2012, 19:25

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

Discussione: elimina aggiungi classi

Strumenti discussione

Ricerca discussione

Visualizza

elimina aggiungi classi

Permessi di invio