Paginación con Divs

[joscasan]

Buenos días...

Tengo hecho una paginación con divs, dependiendo de la página nº X que pinchemos, se verá el contenido y se ocultarán el resto de divs. Pero ahora quiero rizar el rizo, y es que le quiero añadir dos botones uno de Siguiente y otro de Anterior. Si pinchamos en el de siguiente deberemos de avanzar un paso a la capa en la que estemos. Por ejemplo si estamos en el div "pag03" y pinchamos en siguiente deberá de sumar 1 e ir al div "pag04". He definido una variable que es la que toma el valor 1 ya sea para restar o sumar y es la siguiente:

Código HTML:

var paginaActual = 1;

Ahora quiero definir las funciones para siguiente y anterior las tengo definidas pero me falta el contenido que haga que funcionen:

Código HTML:

function avanzaPagina {
}

function retroPagina {
}

Aquí es que no vale de nada history back o go, ya que no se recarga la página, cargamos divs dentro de ella misma.

También facilito el código que tengo para poder paginar con los divs que me funciona perfectamente:

Código HTML:

function paginar(pag) { 
        var n1 = document.getElementById('pag01');
	var n2 = document.getElementById('pag02');
        var n3 = document.getElementById('pag03');
	var n4 = document.getElementById('pag04');
	var e1 = document.getElementById('paginacion_1');
	var e2 = document.getElementById('paginacion_2');
	var e3 = document.getElementById('paginacion_3');
	var e4 = document.getElementById('paginacion_4');
	var cambia = document.getElementById("pag0"+pag);
	var ecambia = document.getElementById("paginacion_"+pag);
	n1.style.display = 'none';
	n2.style.display = 'none';
	n3.style.display = 'none';
	n4.style.display = 'none';
	cambia.style.display = 'block';
	e1.className = 'paginacion';
	e2.className = 'paginacion';
	e3.className = 'paginacion';
	e4.className = 'paginacion';
	ecambia.className = 'paginacion_activa';
}

Muchas gracias

[GatorV]

Yo este tipo de paginación la hago con Prototype, pero te puede dar una idea:

Código:

var currentStep = 1;

function goNext() {
	Element.hide( 'step' + currentStep );
	++currentStep;
	Element.show( 'step' + currentStep );
}

function goPrev() {
	Element.hide( 'step' + currentStep );
	--currentStep;
	Element.show( 'step' + currentStep );
}

Event.observe(window, 'load', function() {
	Element.hide( 'step2' );
	Element.hide( 'step3' );
	Element.hide( 'step4' );
});

Luego tengo cada Div con su id="step1", o "step2", o "stepN". Espero te sea de utilidad.

Saludos.