Assegnare comando JS a pulsanti nav html

[Ines_88]

Non so quanto sia chiaro il titolo di questo post dunque proverò a spiegarmi meglio!

Sto creando una pagina composta da link che invece di aprire nuove pagine, fanno scomparire dei div (contenenti sezioni di sito) per farne apparire altri (ovviamente altre sezioni).

Qua sotto, gli effetti jquery ui che voglio far eseguire al click di un determinato pulsante del menù nav (riportato anch'esso sotto)

JAVASCRIPT:

$(#nav li id="1").click( 
    function(){ 
        var durata = 500;
        $("#nav, #logo").fadeOut(durata);
        $("#about").fadeIn(durata);
    } )

HTML:

   <div id="nav">
    <ul>
     <li id="1">home
     <li id="2">about
     <li id="3">photos
     <li id="4">drawings[/list]
  </div>

Nel JS ho messo in neretto una parte dove credo di sbagliare di sicuro, ovvero dove indicare quale LI in questione stiamo trattando.
Nell'HTML invece, oltre a dare un id ad ogni singolo LI, non so cosa mettere esattamente nell'a href.

Spero di essere stata abbastanza chiara, e di aver elencato tutti gli elementi necessari...
ah sì, il codice del div about è ovviamente contenuto nello stessa pagina

ciao a tutti
Ines

[m4rko80]

$(#nav li #1).click( //id 1 che sta dentro Li contenuto in  id  nav

Comunque da quel che ho capito vuoi fare quello che fa Jquery tabs semplice da usare per fare visualizzare diversi contenuti fra diversi tab/sezioni
http://docs.jquery.com/UI/Tabs

[Ines_88]

Grazie per la correzione :-)
Oddio il link che mi hai mandato mi pare un po' complicato, quello che voglio fare mi pare più semplice, poi magari è la stessa cosa...

in pratica al click di quel LI i div "nav" e "logo" vanno in fade out, mentre il div "read" va in fade in... insomma due scompaiono e uno appare... e i codici usati dovrebbero far questo no? Solo non so bene come collegarli all'html mi sa, visto che se ora clicco sul tasto, in pratica mi ricarica tutto il sito da capo

P.s.: qui nel post ho sbagliato a scrivere il numero, in questo caso parliamo dell'id "2"... insomma nel caso qualcuno ci faccia caso... l'errore non è questo

[m4rko80]

$(#nav li#1).click(      function(){          var durata = 500;         $("#nav, #logo").fadeOut(durata);         $("#about").fadeIn(durata);     } )

Cosi scritto clicco su li di id 1 dentro nav (anche se piu semplicemente potresti usare l'id senza nav e li visto che per regola id identici non dovrebbero esistere in una stessa pagina.

si nascondono id logo e nav(tutto il menu per come e' scritto) e si visualizza cio' che sta in id about(che nn vedo nell esempio).

La pagna presumo ricarichi perche' href e' nullo. Per bloccare mettici href="#" o href="javascript:void(0)"

[Ines_88]

Non hai aggiunto niente in questo codice, giusto?

il nav lo uso per far appunto scomparire il menù tutto insieme, invece di richiamare ogni singolo LI.

ho aggiunto i # negli href, e infatti non ricarica più però... non fa manco le altre cose

il div about contenuto nell'html, è semplicemente questo:

<div id="about">
[img]images/photos/bio.jpg[/img]
</div>

(dovrò farci un tasto per far tornare indietro, ma quello lo faccio dopo, se ci arrivo )

[Ines_88]

non funziona, ma perchèèèèè

[Ines_88]

nessuno?

[Vindav]

a parte il fatto che è sempre sconsigliato dare un id numerico ad un tag html... perche non accedi ad i vari li direttamente dal suo id? senza passare dal div?

$("#1 a").click( 
    function(){ 
        var durata = 500;
        $("#nav, #logo").fadeOut(durata);
        $("#about").fadeIn(durata);
    } )

se ti serve per forza puntare al div contenitore fai cosi: $("#nav #1 a") . La cosa importante è capire che il click del mouse avviene sul tag a e non sull'li quindi va indicato nel selettore.

[Ines_88]

Avevo provato anche nei modi da te indicati, ma non so perché non me ne funziona uno!

Forse il problema è nell'html, nel modo di definire i link?

<div id="home"> 
 <div id="nav">
  <ul>
   <li id="one">home
   <li id="two">about
   <li id="three">photos
   <li id="four">drawings[/list]
</div>

ah, come vedi ho pure rinominato gli id, cambiando i numeri in... numeri

$("#two a").click( 
    function(){ 
        var durata = 600;
        $("#nav, #logo").fadeOut(durata); 
        $("#about").fadeIn(durata);
    })

[Vindav]

$(function(){
	  $("#two a").click( 
			    function(){ 
			        var durata = 600;
			        $("#nav, #logo").fadeOut(durata); 
			        $("#about").fadeIn(durata);
			    });
});