Show & hide funktion med jquery
Lær at lave en simple Show & hide funktion med javascript biblioteket jquery. Med fade eller uden?
#1
Dette kræver ikke nogen erfaringer om javascript for at kan lave dette så det er bare at gå igang.
Først lidt simplem html:
<span onclick="Show('tekst'), Show('luk'), Close('vis')" id="vis">Vis teksten</span><br>
<span onclick="Close('tekst'), Close('luk'), Show('vis')" id="luk" style="display: none;">Skjul tekst</span>
<div id="tekst" style="display:none;">
Her er så den tekst der skal komme frem når klikker på Vis teksten og forsvinder når man klikker Skjul teksten.
</div>
Onclick
Det der sker når man klikker på teksten i span'en
Show(id)
Hvis det med det id der står inde melelm parenteserne.
Close(id)
Lukker det med idet fra parenteserne.
Først lidt simplem html:
<span onclick="Show('tekst'), Show('luk'), Close('vis')" id="vis">Vis teksten</span><br>
<span onclick="Close('tekst'), Close('luk'), Show('vis')" id="luk" style="display: none;">Skjul tekst</span>
<div id="tekst" style="display:none;">
Her er så den tekst der skal komme frem når klikker på Vis teksten og forsvinder når man klikker Skjul teksten.
</div>
Onclick
Det der sker når man klikker på teksten i span'en
Show(id)
Hvis det med det id der står inde melelm parenteserne.
Close(id)
Lukker det med idet fra parenteserne.
(klik for zoom)
#1
#2
Nu skal vi så til Jquery delen, hvis du ikke har jquery så hent filen her: http://jquery.com/
function Show (id)
{
$("#" + id).show ();
}
function Close (id)
{
$("#" + id).hide ();
}
1. Opretter funktionen Show (id)
2. Start parentes
3. Viser det med idet inde mellem Show (Her)
4. Slut parentes
5. Opretter funktionen Close
6. Start parentes
7.Skjuler det med id'en inde i Close
8. Slut parentes
Der skal selvfølgelig lige javascript start og slut på.
Hvis du skulle havde lyst til at det skal fade fordi det ser bedre ud er det bare at skifte denne del:
show ();
med
fadein ("slow");
Hvis det skal være langsomt, hvis medium så det eller fast.
og skift
hide ();
med
fadeout ("slow");
Og der er der jo så de samme hastigheder.
Det var så den håber i syntes den var fint.
Mahope
function Show (id)
{
$("#" + id).show ();
}
function Close (id)
{
$("#" + id).hide ();
}
1. Opretter funktionen Show (id)
2. Start parentes
3. Viser det med idet inde mellem Show (Her)
4. Slut parentes
5. Opretter funktionen Close
6. Start parentes
7.Skjuler det med id'en inde i Close
8. Slut parentes
Der skal selvfølgelig lige javascript start og slut på.
Hvis du skulle havde lyst til at det skal fade fordi det ser bedre ud er det bare at skifte denne del:
show ();
med
fadein ("slow");
Hvis det skal være langsomt, hvis medium så det eller fast.
og skift
hide ();
med
fadeout ("slow");
Og der er der jo så de samme hastigheder.
Det var så den håber i syntes den var fint.
Mahope
#2
#3
Hvis du ikke kan finde ud af at sætte Jquery ind på din hjemme side så kommer der her en lille forklaring.
Gå ind på http://jquery.com og tryk på download sikre dig at det er Production versionen.
Så kommer du over på google med et link til den, tryk på linket og gem filen et sted på din computer.
Nårh du har gemt den oploader du den til din hjemmeside via ftp elller hvad du bruger.
Nu inkludere du så filen på alle sider du skal bruger jquery.
Brug denne til at inkludere den med:
Husk at "dinhjemmeside.dk" skal skiftes ud med din egen hjemmeside.
Klik på billedet for at få lidt hjælp der.
Der er selv følgelig også den nemme måde at gøre det på, bare inkludere selve siden man henter den fra.
Jeg vil dog ikke anbefale den sidste metode da google sætter en cookie i alle der besøger din side så.
Gå ind på http://jquery.com og tryk på download sikre dig at det er Production versionen.
Så kommer du over på google med et link til den, tryk på linket og gem filen et sted på din computer.
Nårh du har gemt den oploader du den til din hjemmeside via ftp elller hvad du bruger.
Nu inkludere du så filen på alle sider du skal bruger jquery.
Brug denne til at inkludere den med:
<script src="http://dinhjemmeside.dk/jquery-1.3.1.min.js" type="text/javascript"></script>
Husk at "dinhjemmeside.dk" skal skiftes ud med din egen hjemmeside.
Klik på billedet for at få lidt hjælp der.
Der er selv følgelig også den nemme måde at gøre det på, bare inkludere selve siden man henter den fra.
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
Jeg vil dog ikke anbefale den sidste metode da google sætter en cookie i alle der besøger din side så.
(klik for zoom)
#3