sid/js/actionScript.js

/* VARIABLES */
var DOM = {
	WRAPPER   : document.querySelector('#WRAPPER'),
		MENU      : document.querySelector('#MENU'),
		HEADER    : document.querySelector('#HEADER'),
		SUBHEADER : document.querySelector('#SUBHEADER'),
			SUBSECTIONS : document.querySelector("#SUBHEADER > nav"),
		CONTAINER : document.querySelector('#CONTAINER'),

};

/* GESTION DES SOUS-PARTIES */
DOM.SUBSECTIONS.addEventListener('click', function(e){
	
	if( e.target.tagName == 'SPAN' ){ // s'il s'agit bien d'un élément de nav
		
		// on essaie de récupérer l'ancien "lien"
		var lastActive = document.querySelector('#SUBHEADER > nav > span.active');
		if( lastActive != null ) // si on a trouvé qqch
			lastActive.className = ''; // on le désactive
		e.target.className = 'active'; // on signale celui cliqué comme "actif"
	

		// on essaie de récupérer l'ancienne section active
		var lastSection = document.querySelector('#CONTAINER div.active');
		if( lastSection != null ) // si on a trouvé qqch
			lastSection.className = ''; // on la désactive

		// on active la page associée
		var target = document.querySelector('#CONTAINER > div[name='+e.target.dataset.sectname+']');
		if( target != null )
			target.className = 'active';
	}

}, false);

/* on active la section au chargement */
// on essaie de récupérer le lien actif
var lastActive = document.querySelector('#SUBHEADER > nav > span.active');
if( lastActive != null ){ // si on trouve qqch

	// on cherche la section associée
	var target = document.querySelector('#CONTAINER > div[name='+lastActive.dataset.sectname+']');
	if( target != null ) // si on a trouvé qqch
		target.className = 'active'; // on l'active
}