[JQuery] Menu select

**graffithouse** · 23-09-2009, 21:57

ciao a ttti, sto iniziando da poco a usare jquery, e m itrovo molto bene, nella mia pagina ho inserito gia altri script, e pensavo di continuare ad usarlo per non creare conflitti tra gli script.

il mio problema è questo,
ho un menu , e dovrei fare in modo che la classe select, cambi a seconda del tasto clikkato con il mouse.

codice:

<ul>
[*]Link[*]Link[*]Link[*]Link[*]Link[*]Link
[/list]

questa è la parte di html... purtroppo npn so come procedere.. ho provato a cambiare con .onclick()
ma sensa nessun risultato....

**Xinod** · 24-09-2009, 01:32

identifica l' ul con un id

codice:

  $(document).ready(function(){
	$('#idUl li a').click(function(){
		$('#idUl li a.tuaClasse').removeClass('tuaClasse');
		$(this).addClass('tuaClasse');
		// return false
	})
  });

ciao

**graffithouse** · 24-09-2009, 09:13

non funziona...

ho nominato l'ul #menu
css

codice:

#menu{
	width:100%;
	margin:0 auto 80px auto;
	padding:0 0  0;
	display:inline-block;
	
}

#menu li{
	display:block;
	width:100%px;
	margin:0;
	padding:0;
	height:33px;
}

#menu li a{
	display:block;
	text-align:left;
	line-height:30px;
	font-size:13px;
	text-decoration:none;
	color:#1f1f1f;
	text-indent:5px;
	font-weight: bold;
}


#menu a:hover{
	background:url(../img/ar.gif)  no-repeat right center #1f1f1f;
	color:#fff;
}
#menu li a.select{
	background:url(../img/ar.gif) no-repeat right center #1f1f1f;
	display:block;
	text-align:left;
	line-height:30px;
	font-size:13px;
	text-decoration:none;
	color:#ffffff;
	text-indent:5px;
	font-weight: bold;
}

html

codice:

<ul id="menu">
[*]HOME PAGE[*]CONDOMINI &amp; LOCAZIONI[*]I NOSTRI SERVIZI[*]COSULENZE[*]DIRITTO CONDOMINIALE[*]INFORMAZIONI &amp; CONTATTI[*]LOGIN
[/list]

ed ho modificato lo script in questo modo...

jquery

codice:

 $(document).ready(function(){
	$('#menu li a').click(function(){
		$('#menu li a.select').removeClass('select');
		$(this).addClass('select');
		// return false
	})
  });

cosa sto sbagliando?

**Senamion** · 24-09-2009, 09:37

A vedere così sembra corretto, prova mettere un alert prima del removeClass per capire se entra

**graffithouse** · 24-09-2009, 09:40

Originariamente inviato da Senamion
A vedere così sembra corretto, prova mettere un alert prima del removeClass per capire se entra

così?

codice:

 $(document).ready(function(){
	$('#menu li a').click(function(){
		$('#menu li a.select').removeClass('select');
                         alert("funziona")
		$(this).addClass('select');
		// return false
	})
  });

**Senamion** · 24-09-2009, 09:50

Prova così, o anche prima della removeClass, verifica anche se da' qualche errore javascript, eventualmente usa firefox per vedere che errore è.

**graffithouse** · 24-09-2009, 10:06

firebug mi segnala questo errore

codice:

È stato raggiunto il limite di elementi registrabili. Elementi che non verranno visualizzati: %S		Impostazioni	 
$ is not defined
index.php()index.php (riga 38)
[Break on this error] $(document).ready(function

**Xinod** · 24-09-2009, 13:37

pubblica da qualche parte e lascia il link

quanto ti ho postato funziona, insieme al resto dici che non funziona
ma noi questo resto non lo conosciamo

**biggiebi** · 26-09-2009, 10:04

Allora questo è il codice del mio menu.

<div id="menu">
<table border="0" cellpadding="0" cellspacing="0" width="845">

<tr>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
</tr>
<tr>
<td>[img]menu/menu_r1_c1.png[/img]</td>
<td>[img]menu/menu_r1_c2.png[/img]</td>
<td rowspan="2">[img]menu/menu_r1_c3.png[/img]</td>
<td>[img]menu/menu_r1_c4.png[/img]</td>
<td rowspan="2">[img]menu/menu_r1_c5.png[/img]</td>
<td>[img]menu/menu_r1_c6.png[/img]</td>
<td>[img]menu/menu_r1_c7.png[/img]</td>
<td rowspan="2">[img]menu/menu_r1_c8.png[/img]</td>
<td>[img]menu/menu_r1_c9.png[/img]</td>
<td rowspan="2">[img]menu/menu_r1_c10.png[/img]</td>
<td>[img]menu/menu_r1_c11.png[/img]</td>
<td rowspan="2">[img]menu/menu_r1_c12.png[/img]</td>
<td>[img]menu/menu_r1_c13.png[/img]</td>
<td rowspan="2">[img]menu/menu_r1_c14.png[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
</tr>
<tr>
<td colspan="2">[img]menu/menu_r2_c1.png[/img]</td>
<td>[img]menu/menu_r2_c4.png[/img]</td>
<td colspan="2">[img]menu/menu_r2_c6.png[/img]</td>
<td>[img]menu/menu_r2_c9.png[/img]</td>
<td>[img]menu/menu_r2_c11.png[/img]</td>
<td>[img]menu/menu_r2_c13.png[/img]</td>
<td>[img]menu/spacer.gif[/img]</td>
</tr>
</table>
</div>

E questo lo script

<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<script type="text/javascript">

</script>

**Xinod** · 26-09-2009, 13:13

che roba e' questa?
sicuro sia il codice giusto?

per favore, per velocizzare pubblica e lascia qui un link

Discussione: [JQuery] Menu select

Strumenti discussione

Ricerca discussione

Visualizza

[JQuery] Menu select

Permessi di invio