[Jquery] Visualizzazione pagine con ul

**Felino** · 19-02-2013, 12:59

Salve utenti,
ho una pagina composta da un classico menu:

codice:

Voce 1
Voce 1
Voce 1
Voce 1

ed un elenco puntato:

codice:

<ul>
    <li id="content_1">PAGINA 1
    <li id="content_2">PAGINA 1
    <li id="content_3">PAGINA 1
    <li id="content_4">PAGINA 1[/list]

Vorrei realizzare i seguenti step:
1) se non seleziono alcuna voce del menù non devo veder nulla dell'elenco ul.

2) se seleziono una voce del menù mi da il relativo li, se ne seleziono un'altra mi nasconde quella selezionata prima e mi da la nuova.

Potreste darmi una mano?

Grazie.

**Vindav** · 19-02-2013, 13:20

non hai scritto ancora nulla? l'html è già errato, stai usando gli stessi id per il menu e per l'elenco, che poi non ti servono a nulla, devi usare i class, cosi da gestire tutto il menu in blocco.

<a class="menu">Voce 1</a>
ecc....

**Felino** · 19-02-2013, 13:32

Ok, va bene, cambiarli non è un problema.

Nell'ulenco ul metto classs="menu"?

Ma come tratto la visualizzazione con jquery?

**Vindav** · 19-02-2013, 13:46

un esempio:

codice:

Voce 1
Voce 2
Voce 3
Voce 4

<ul>[*]PAGINA 1[*]PAGINA 2[*]PAGINA 3[*]PAGINA 4[/list]

jquery:

codice:

$(".menu").click(function(){
  $("ul li").hide();
  $("ul li:eq("+$(".menu").index(this)+")").show();
});

Ricordati inoltre che devi inizialmente nascondere l'elenco con il css

**Felino** · 19-02-2013, 13:50

Wow grazie, ma dimmi, come funziona l'associazione tra la voce selezionata nel menù ed il relativo li da visualizzare?

**Vindav** · 19-02-2013, 14:52

recupero l'indice del link cliccato(il primo è 0, il secondo 1 e cosi via), e mostro il tag li con lo stesso indice.

**Felino** · 28-02-2013, 14:14

Vidanv, ho provato ad utilizzare il tuo codice, ma non va...

Ho scritto il seguente codice, c'è qualche errore?

Grazie.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(".menu").click(function(){
  $("ul li").hide();
  $("ul li:eq("+$(".menu").index(this)+")").show();
});
</script>
<style type="text/css">
ul{display:none;}
</style>
</head>

<body>
Voce 1
Voce 2
Voce 3
Voce 4

<ul>[*]PAGINA 1[*]PAGINA 2[*]PAGINA 3[*]PAGINA 4[/list]

</body>
</html>

**Vindav** · 28-02-2013, 14:30

codice:

$(function(){
$(".menu").click(function(){
  $("ul li").hide();
  $("ul li:eq("+$(".menu").index(this)+")").show();
});
});

inoltre devi nascondere gli li non l'ul

**Felino** · 28-02-2013, 14:37

Vero, avevo dimenticato di scrivere: $(function(){ }

Però, continua a non funzionare...

**Vindav** · 28-02-2013, 14:44

inoltre devi nascondere gli li non l'ul

Discussione: [Jquery] Visualizzazione pagine con ul

Strumenti discussione

Ricerca discussione

Visualizza

[Jquery] Visualizzazione pagine con ul

Permessi di invio