KOMPOOS.NL

onhashchange - HTML5

home » manuals » html5 » onhashchange.html

sitemap | terug naar het html5 referentie - events - overzicht

uitleg onhashchange attribuut

Achtereenvolgens staan hieronder vier stukjes code. Een stylesheet die je in de head-sectie van jouw pagina moet plaatsen, een vervanging voor de body-tag, een div met 2 hash-verwijzingen, en een stukje javascript om de onhashchange te kunnen demonstreren. De procedure is eenvoudig. Zo gauw er een hash veranderd op een pagina wordt de _onhashchange() functie (via het onhashchange-attribuut) getriggerd. Klik even op hash twee hieronder om het resultaat te zien.

hash één | hash twee

stylesheet voor de onhashchange


<style type="text/css" media="screen">
        #onhashchange_ a{color:#000;background:transparent}
        #onhashchange_ a.deze{color:#000;background:#0ff}
</style>

body-tag voor het onhashchange gebeuren


<body onhashchange="_onhashchange()">

html code voor de onhashchange procedure


<div id="onhashchange_">
        <a href="#een">hash één</a> | <a href="#twee">hash twee</a>
</div>

tot slot het javascript


<script>
function _onhashchange()
{
    var a=document.getElementById('onhashchange_').getElementsByTagName('a');
    for(var i=0; i<a.length; i++)
    {
        a[i].className=a[i].className.replace(/ deze/g, '');

        var link_hash=a[i].href.split('#');
        if('#'+link_hash[1]==location.hash)
        {
           alert("er is iets in de adresbalk veranderd"); a[i].className+=' deze';
        }
    }
}
</script>