login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > Javascript


Gegevens:
Geschreven door:
hoi22
Moeilijkheidsgraad:
Gemakkelijk
Hits:
7900
Punten:
Aantal punten:
 (4)
Aantal stemmen:
1
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (5)
 

Tutorial:

Toon/verberg link met jQuery

jQuery toon/verberg tutorial 1. Inleiding & voorbereiding
2. De html code
3. De jQuery code
4. Slot


1. Inleiding & voorbereiding

Inleiding

In deze tutorial ga ik je leren hoe je een toon/verberg systeem maakt met jQuery. Een voorbeeld hiervan zie je op deze pagina.


Voorbereiding

Download eerst hier de laatste versie van jQuery.
Maak een nieuw html-bestand aan en zet daarin de volgende code.

<html>
 <head>
   <script
type="text/javascript" src="pad/naar/je/jquery/bestand.js" ></script>
   <title>
Toon/verberg jQuery</title>
 </head>
<body>


</body>
</html>


pijl top
2. De html code

We gaan nu een link en een div maken. Laten we beginnen met de link zet de volgende code in het body gedeelte.
<a href="#" class="showhide">Verberg</a>

We gaan ook een div maken met daarin tekst die wordt verborgen en getoond. Zet de volgende code ook tussen de body tags. Ik heb hem in dit geval gevuld met Lorem ipsum tekst, je kunt dit natuurlijk veranderen.

<div class="tekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies cursus est. Fusce et nisi ligula, sit amet venenatis nunc. Nullam vitae est nisl, vel iaculis lorem. Aenean tristique risus vitae sem suscipit eleifend. Proin pulvinar, ipsum eu condimentum porta, nisl diam adipiscing nisl, ac lobortis ipsum urna ut mauris. Nulla blandit, turpis vel pretium vestibulum, leo lacus cursus ligula, at tempor nulla nulla eget enim. Sed ac rutrum nisl. Vivamus blandit ullamcorper dolor eget vestibulum. Proin in dictum lectus. Proin sagittis elit ac augue venenatis rutrum. Proin et arcu massa, eget pharetra purus. Maecenas aliquam gravida enim quis placerat. Vivamus et blandit tellus.</div>


pijl top
3. De jQuery code

Eerst moeten we ervoor zorgen dat als de tekst van de link 'Verberg' is, de div wordt verborgen en de tekst wordt veranderd. Ook moeten we ervoor zorgen dat als de tekst van de link 'Toon' is, de div wordt weergegeven en de tekst weer wordt teruggezet naar 'Verberg'. Hieronder staat de code met uitleg.

//als de pagina gereed is
$(document).ready(function(){
    // we maken een functie aan omdat dit makkelijker is om aan te roepen
    function showandhide() {
        //als de tekst van de link verbergen is
        if ($("a.showhide").text() == "Verberg"){ 
            // zorg dat de div wordt verborgen; je kunt 'slow' ook vervangen door 'fast'
            $("div.tekst").hide("slow");
            
            // zorg dat de tekst van de link wordt omgezet naar 'Toon'
            $("a.showhide").text("Toon"); 
        // als de tekst van de link geen 'Verbergen' dus 'Toon' is
        } else { 
            // zorg dat de div wordt weergegeven; ook hier kun je 'slow' weer vervangen door 'fast'
            $("div.tekst").show("slow");
            
            // zorg dat de tekst van de link wordt omgezet naar 'Verberg'
            $("a.showhide").text("Verberg");
        }
        
    }

    // de functie aanroepen als er op de link wordt geklikt
    $("a.showhide").click(showandhide) 
});

pijl top
4. Slot

Dit was dan mijn eerste tutorial op Sitemasters.be. Ik hoop dat jullie er iets van hebben geleerd

pijl top



« Vorige tutorial : WYSIWYG-editor

© 2002-2019 Sitemasters.be - Regels - Laadtijd: 0.013s