È una roba da farsi in JavaScript. Non sono molto al corrente di tutte le nuove potenzialità di CSS di recente introduzione, e neanche i browser meno recenti lo sono; ma credo che così sia, amen, via con una base di partenza così ci studi un po'.
codice:
<head>
<script language="javascript" >
var attuale = 1;
function avanza(){
document.getElementById("div" + attuale).style.display="none";
prossimo = attuale + 1;
document.getElementById("div" + prossimo).style.display="";
attuale = prossimo;
}
</script>
<style>
div {border: 1px dashed gray; padding: 4px; width: 30%; margin: auto}
</style>
</head>
<body bgcolor="#DDD">
<h2 align="center"><a href="javascript: arretra()"><</a> <a href="javascript: avanza()">></a></h2>
<div id="div1">Primo Capitolo</div>
<div id="div2" style="display: none"><img src=""> II° Capitolo</div>
<div id="div3" style="display: none"><input> III° contenuto</div>
<div id="div4" style="display: none"><br>in parole povere, questo è il DIV con ID="div4"</div>
<div id="div5" style="display: none">e questo è l' ultimo: ora bisognerebbe che al click su > "avanti", si torni al primo DIV, o che
esso link per l' avanzamento si disabiliti/sparisca (e allora si potrà solo tornare indietro con l' altro). <br>
Al momento, un prossimo click su > mette in <tt>display: none</tt> questo DIV ma poi la<tt> function </tt>
va a cercare il prossimo con <tt>id="div6"</tt> ("div" + 5 +1), che però non esiste nel Documento. <br>
<br>Il segno + in javascript funge sia da operatore numerico, che da concatenatore.</div>
altre componenti statiche della pagina ...
</body>
Rispondi quotando
