• Login
  • Register
  • Zoek
This Thread
  • Everywhere
  • This Thread
  • This Forum
  • Articles
  • Pages
  • Forum
  • Filebase Entry
  • More Options

ICTscripters

Dé plek voor IT

Dé plek voor IT

Login

Geavanceerde opties
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  9. Goedkope domeinnamen
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. (X)HTML + XML + CSS

Forum

  • Beta-testers gezocht voor Crypto-oefenplatform

    Syntax 29 januari 2026 om 16:11
  • Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

    Syntax 19 januari 2026 om 09:34
  • Developer Gezocht

    Mikevdk 10 januari 2026 om 18:57
  • Op zoek naar de legends

    Syntax 5 januari 2026 om 13:50
  • [FREE] WeFact Hosting module

    Jeroen.G 13 oktober 2025 om 14:09
  • Help testers nodig voor android app Urgent

    urgentotservices 26 september 2025 om 10:21
  • Versio vervanger

    Jeroen.G 25 augustus 2025 om 15:56
  • Afspraken systeem met planbeperking

    Lijno 1 augustus 2025 om 23:04

Marktplaats

  • 350 Nieuwe Domeinnamen Januari 2026

    shiga 1 februari 2026 om 14:21
  • 321 Nieuwe Domeinnamen December 2025

    shiga 1 januari 2026 om 10:26
  • Meerdere mafia game template te koop

    Syntax 26 december 2025 om 00:07

jQuery ahref

  • Jackie
  • 27 april 2012 om 15:38
  • Closed
  • Jackie
    Hardstyle
    Berichten
    224
    • 27 april 2012 om 15:38
    • #1

    Hallo allemaal.

    Ik begin net pas met jQuery (het is dus nog nieuw voor mij.

    Ik wil als je op een link drukt dat je naar een andere pagina gaat. Een soort pagina systeem.

    Dit is wat ik heb!

    PHP
    (function($) {
            $(document).ready(function() {
                $('#content').load('/start.php', function() {
                $('button').click(function() {
                    $('#content').fadeOut(800, function() {
                        $('#content').fadeIn(800).load('/home.php');
                    });
                });
                });
            });
        })(jQuery);
    Toon Meer

    De startpagina is start.php

    Als ik nu op de button druk dan gaat ie naar home.php

    Als ik dus nu 100 links heb moet ik dit 100 keer doen.
    Is hier een oplossing voor?

    Bezig met een zelf gemaakte source, geschreven vanaf 0 natuurlijk!

  • Thisguyisgone
    Elite members
    Ontvangen Reacties
    197
    Berichten
    7.880
    • 27 april 2012 om 15:40
    • #2

    met php ?

  • Jackie
    Hardstyle
    Berichten
    224
    • 27 april 2012 om 15:41
    • #3

    Nee dat is niet wat ik bedoel. Ik denk dat ik het heb. Als het me lukt post ik het

    Bezig met een zelf gemaakte source, geschreven vanaf 0 natuurlijk!

  • jopitan
    Professional
    Berichten
    684
    • 27 april 2012 om 18:12
    • #4

    Voeg een attribuut REL toe aan alle links waarop je drukt met de value zoiets als 'index' of 'home' of wat dan ook maar.
    Heb het volgende stukje voor je geschreven:

    PHP
    $(function () {
    	$('#content').load('/start.php');
    	$('button').live('click', function() {
    		var url = '/' + $(this).attr('rel') + '.php';
    		$('#content').fadeOut(800, function() {
    			$(this).load(url).fadeIn(800);
    		});
    	});
    });

    Dit is alles dat je nodig hebt. $(function() { is het zelfde als Document ready ;)

    En de button element zou er dan zo uitzien:

    PHP
    <button rel="home">

    Kast: HAF922 | CPU: I7-930 @ 4.0GHz | CPU Cooler: Noctua NH-D14 | HDD0: Crucial M4 128GB, HDD1: Kingston SSD 64GB, HDD2/3: WD Black & Green 1TB, HDD4: Seagate 1.5TB | Mem: Kingston HyperX 12GB @ 1600MHz | Graphics: Crossfire HD6970 | Res: 5760x1080

  • Jackie
    Hardstyle
    Berichten
    224
    • 27 april 2012 om 18:33
    • #5

    Oke dankjewel het heeft me geholpen!

    Het werkt nu perfect. Het werkt infeite als een iframe. Alleen veel mooier!

    Nieuwe reactie samengevoegd met originele reactie op 27.04.12 18:52:33:
    BUMP

    Nog een vraagje. Ik wil er een functie van maken.

    PHP
    $(function() {
            $('#content').load('/home.php');
            
            function loadPage(url) {
                $('a').live('click', function() {
                    //var url = '/' + $(this).attr('href');
                    
                    $('#content').fadeOut(800, function() {
                        $(this).load(url).fadeIn(800);
                    });
                });
            }
        });
    Toon Meer

    Als ik dit dit gebruik.

    PHP
    <a onclick="loadPage('/test.php');">Test</a>

    Dan krijg ik deze fout:

    PHP
    Uncaught ReferenceError: loadPage is not defined

    Wat doe ik fout?

    Bezig met een zelf gemaakte source, geschreven vanaf 0 natuurlijk!

  • jopitan
    Professional
    Berichten
    684
    • 27 april 2012 om 19:11
    • #6

    Dit komt omdat een javascript functie geen interactie kan gebruiken.
    Je zou het kunnen oplossen doormiddel van het zo te doen:

    PHP
    function loadPage(url) {
    	$('#content').fadeOut(800, function() {
    		$(this).load(url).fadeIn(800);
    	});
    }
    
    
    $(function() {
    	$('#content').load('/home.php');
    	$('a.menu').live('click', function() {
    		loadPage($(this).attr('href'));
    		return false;
    	});
    });
    Toon Meer
    PHP
    <a href="/test.php" class="menu">Test</a>

    Maar wat je dan inprincipe doet is de functionaliteit die in Jquery weg halen en zou ik het zelf op de volgende manier doen:

    PHP
    $(function() {
    	$('#content').load('/home.php');
    	$('a.menu').live('click', function() {
    		var url = $(this).attr('href');
    		$('#content').fadeOut(800, function() {
    			$(this).load(url).fadeIn(800);
    		});
    		return false;
    	});
    });
    PHP
    <a href="/test.php" class="menu">Test</a>

    De class gebruik je op dat moment als selector, maar je kunt er ook nog een style aan koppelen via je CSS (als gewenst) De selector class is meer zodat niet alle A elementen (die extern gaan bijv) niet ook worden ingeladen zolang ze de class MENU niet hebben.

    Kast: HAF922 | CPU: I7-930 @ 4.0GHz | CPU Cooler: Noctua NH-D14 | HDD0: Crucial M4 128GB, HDD1: Kingston SSD 64GB, HDD2/3: WD Black & Green 1TB, HDD4: Seagate 1.5TB | Mem: Kingston HyperX 12GB @ 1600MHz | Graphics: Crossfire HD6970 | Res: 5760x1080

  • Tim
    Enlightened
    Ontvangen Reacties
    77
    Berichten
    3.686
    • 27 april 2012 om 20:11
    • #7
    PHP
    $(document).ready(function() {
    $('a.ajax').click(function(e) {
    e.preventdefaults();
    $('#content).load($(this).href);
    });
    });

    Vergelijkbaar iets? :)

    Edit: beetje fout, heb het hier op CP geschreven.

    Master student IT-recht en Master student Ondernemingsrecht & software ingenieur
    My Personal profile
    My professional profile (LinkedIn/CV)

  • jopitan
    Professional
    Berichten
    684
    • 27 april 2012 om 20:17
    • #8
    Citaat van BrokenTrack
    PHP
    $(document).ready(function() {
    $('a.ajax').click(function(e) {
    e.preventdefaults();
    $('#content).load($(this).href);
    });
    });

    Vergelijkbaar iets? :)

    Edit: beetje fout, heb het hier op CP geschreven.

    e.prevendefaults en de parameter E hoeft in principe niet meegegeven te worden, dit kan korter door return false aan het eind van de click method te plaatsen.

    Daarnaast kun je $(document).ready(function() { afkorten naar $(function() {

    Hoe minder karakters -> hoe minder het in beslag neemt -> hoe sneller een pagina laad

    Kast: HAF922 | CPU: I7-930 @ 4.0GHz | CPU Cooler: Noctua NH-D14 | HDD0: Crucial M4 128GB, HDD1: Kingston SSD 64GB, HDD2/3: WD Black & Green 1TB, HDD4: Seagate 1.5TB | Mem: Kingston HyperX 12GB @ 1600MHz | Graphics: Crossfire HD6970 | Res: 5760x1080

  • Jackie
    Hardstyle
    Berichten
    224
    • 27 april 2012 om 23:05
    • #9

    Dankjewel allemaal voor de reacties het is gelukt. De pagina loopt nou mooi over.

    Nogmaals dank. En ik begin nu zelfs een klein beetje jQuery te snappen!
    :slotje:

    Bezig met een zelf gemaakte source, geschreven vanaf 0 natuurlijk!

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!

Maak een account aan Login

ICT Nieuws

  • Fijne feestdagen

    tcbhome 28 december 2025 om 13:55
  • Kritieke update voor Really Simple Security-plug-in

    K.Rens 16 november 2024 om 16:12
  • ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

    K.Rens 2 november 2024 om 16:09

Blogs

  • Functioneel ontwerp

    Dees 28 december 2014 om 12:38
  • Access Control List implementatie in PHP/MySQL - deel 1/2

    FangorN 28 december 2018 om 12:35
  • Access Control List implementatie in PHP/MySQL - deel 2/2

    FangorN 29 december 2018 om 12:37

Gebruikers die dit topic bekijken

  • 1 Gasten
  1. Marktplaats
  2. Design
  3. Voorwaarden
  4. Ons team
  5. Leden
  6. Geschiedenis
  7. Regels
  8. Links
  9. Privacy Policy
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen | Beste Zetes eid kaartlezer webshop
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design