DIVs mit Javascript vor- und zurückschalten

Javascript-Tutorial Inhalt »

Wie bei einer Bildergalerie können mit Javascript statt einzelner Bilder auch einzelne Div-Container mit Links vor- und zurück geschaltet werden. Die einzelnen Div´s können dann beliebigen Inhalt haben, z.B. Bilder, Links, Tabellen, Text oder weitere Div´s...

Dies ist DIV 1

zurück 1 von 4 vor

Hier ein Javascript-Code für 4 Div´s:

<!DOCTYPE html>
<html lang="de">
  
<head>
<meta charset="utf-8">
<title>...</title>
<style type="text/css">
div#div-id-01,div#div-id-02,div#div-id-03,div#div-id-04{
border:2px solid #f00; margin:5px;padding:15px;}
.cent{text-align:center}
</style>
</head>

<body>

<p>DIVs mit Javascript vor- und zurückschalten</p>

<div id="div-id-01" style="display: block"><p><strong>Dies ist DIV 1</strong></p></div>
<div id="div-id-02" style="display: none"><p><strong>Dies ist DIV 2</strong></p></div>
<div id="div-id-03" style="display: none"><p><strong>Dies ist DIV 3</strong></p></div>
<div id="div-id-04" style="display: none"><p><strong>Dies ist DIV 4</strong></p></div>
  
<div class="cent">
<p><a href="javascript:p01()">zurück</a>
<span id="counter">1</span> von 4
<a href="javascript:n01()">vor</a></p>
</div>
  
<div class="cent">
<p><a href="javascript:s01(1)">DIV 1</a>
<a href="javascript:s01(2)">DIV 2</a>
<a href="javascript:s01(3)">DIV 3</a>
<a href="javascript:s01(4)">DIV 4</a></p>
</div>
 
<script type="text/javascript">
var i1=1;
function f01(){
var d1=document;
var z01=d1.getElementById('div-id-01'),
     z02=d1.getElementById('div-id-02'),
     z03=d1.getElementById('div-id-03'),
     z04=d1.getElementById('div-id-04');
var a01,a02,a03,a04;
var x1="block",y1="none";
	if(i1==1){a01=x1;}else{a01=y1;}
	if(i1==2){a02=x1;}else{a02=y1;}
    if(i1==3){a03=x1;}else{a03=y1;}
    if(i1==4){a04=x1;}else{a04=y1;}
	z01.style.display=a01;
	z02.style.display=a02;
	z03.style.display=a03;
	z04.style.display=a04;
	d1.getElementById('counter').innerHTML=i1;}
function n01(){i1++;if(i1>4){i1=1;}f01();}
function p01(){i1--;if(i1<1){i1=4;}f01();}
function s01(b1){i1=b1;f01();}
</script>
       
</body>
  
</html>
 

Galerien / Präsentationen...

city001-sidebar

link-icon002 Galerien-Übersicht...

Kategorien

Alle Artikel

(Inhaltsverzeichnis)

link-icon002 alphabetisch geordnet...

link-icon002 nach Datum geordnet...

soziale Netzwerke...

"Cogniclip" ist auch auf folgenden sozialen Netzwerken vertreten:

Cogniclip auf Twitter Cogniclip auf Google+
 

Per RSS Beiträge abonnieren:

RSS-Feed von Cogniclip
 

Kalender

Juli 2017
M D M D F S S
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930
31