PDA

Visualizza la versione completa : Box a comparsa


fermat
07-05-2010, 09:48
ciao a tutti.
ho questa piccola pagina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Config file</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<div id="centro">
<h1>File di configurazione Linux & Mac OS X</h1>



<span>sshd_config</span> #File configurazione server ssh</p>

<button>Show it</button>
<p class="opzioni">Hello</p>



<span>vsftpd_config</span> #File configurazione server vsftpd</p>

<button>Show it</button>
<p class="opzioni">Hello</p>

</div>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>
</body>
</html>
in pratica quando si clicca su un un bottone si apre un box con un testo.
fin qui ok...
il problema è che io ho più bottoni e basta cliccare su uno per far aprire tutti i box.
io invece vorrei che si apra solo il testo del bottone spinto.
spero di essermi spiegato bene.
è possibile??

fermat
07-05-2010, 21:04
nessuno??

in pratica io vorrei ottenere un effetto tipo questo: http://www.w3.org/TR/
quando si clicca su una voce si apre un "quadrato" sotto con il testo.

cavicchiandrea
07-05-2010, 21:37
Premesso che non conosco jquery e che l'esempio non ne fa uso nel tuo codice devi riferirti ad un id (univoco) non ad un tag :ciauz:

fermat
08-05-2010, 09:09
ciao!
potresti spiegarti meglio!
nn ho ben capito cosa intendi....

fermat
08-05-2010, 11:58
ho fatto queste modifiche:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Config file</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<div id="centro">
<h1>File di configurazione Linux & Mac OS X</h1>



<span>sshd_config</span> #File configurazione server ssh <button id="ssh">Show it</button></p>

<p class="opzioni">Hello</p>



<span>vsftpd_config</span> #File configurazione server vsftpd <button id="vsftpd">Show it</button></p>

<p class="opzioni">Hello</p>

</div>
<script>
$("#ssh").click(function () {
$("p").show("slow");
});
</script>
</body>
</html>
ho aggiunto un id ai bottoni e ho modificato la prima riga dello script.
però funziona come prima.
forse devo metterlo in un'altra parte il codice dello script?

fermat
08-05-2010, 12:37
ho ottenuto più o meno quello che volevo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Config file</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
function click() {
$("#ssh").show("slow");
}
click();
</script>
</script>
</head>
<body>
<div id="centro">
<h1>File di configurazione Linux & Mac OS X</h1>



<span>sshd_config</span> #File configurazione server ssh Show it (#)</p>

<p id="ssh">Hello</p>



<span>vsftpd_config</span> #File configurazione server vsftpd Show it (#)</p>

<p id="vsftpd">Hello</p>

</div>
</body>
</html>
prima di tutto ho creato un evento onclick e cambiato <button> con <a>.
così facendo sono riuscito a metterlo nell'head.
dopo di che ho dato un id agli

nascosti (nascosti tramite css).
nella funzione ho messo l'id del paragrafo al posto di

.
così ottengo che si apra solo il

del link dove clicchi.
2 problemi però:
-così dovrei riscrivere le funzioni per ogni

: posso evitare?
-devo dare un id univoco a ogni

nacosto ricreando pure la regola css: appesantisce? posso evitare sul css in qualche modo?

Loading