Tartalom váltása a lap újratöltése nélkül I.


honlapkészítés során van olyan helyzet, hogy szeretnénk betölteni a lapon 1-1 olyan új szöveget, képet miegymást, hogy az ne járjon az egész oldal újratöltésével.

Erre a minap a weblabor.hu egyik topicjában találtam egy megoldást, amit rudo készített javascript segítségével, a módszer felettéb egyszerűen és kényelmesnek tűnik. Talán egyetlen hátrányaként az említhető meg, hogy a böngészőben mindenképp engedélyezni kell a javascriptek működését, de azt hiszem ez ma már nem akkora gond és kevés embernél van kimondottan tiltva, hisz javascript használata nélkül nagyon sok honlap részben vagy teljesen működésképtelen.
Előnyeként viszont mindenképp meg kell említenem, hogy az általam nem igazán favorizált iframe-s megoldást ki lehet vele váltani.

Nézzük a megoldást. Mire van szükség?
Először is adott egy javascript kód, amit a dokumentumba kell ágyazni vagy akár kívülről is meg lehet hívni:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
window.onload=function()
{
    var obj=document.getElementById('navigacio').getElementsByTagName('A');
    for(i=0;i<obj.length;i++){
        obj[i].href_=obj[i].href;
        obj[i].href='javascript:void(0)';
        obj[i].onclick=function(){
            for(j=0;j<obj.length;j++){
                document.getElementById(obj[j].href_.split('#')[1]).style.display='none';
            }
            document.getElementById(this.href_.split('#')[1]).style.display='block';
        }
    }
 
    var firstpage='doboz1';
 
    for(i=0;i<obj.length;i++){
        var contentdiv=document.getElementById(obj[i].href_.split('#')[1]);
        if(contentdiv.id!=firstpage)contentdiv.style.display='none';
    }
}

Kell egy css hozzá, ami a megjelenítendő dobozok formázását tartalmazza (ez nem kötelező elem persze):

1
2
3
4
5
6
7
8
9
10
#doboz1, #doboz2, #doboz3 { 
	display: block;
	width: 500px;
	border:1px solid #f1f1f1;
	padding: 5px;
	margin-top: 3px;
	}
	#doboz1 { background-color: green; }
	#doboz2 { background-color: yellow; }
	#doboz3 { background-color: grey; }

Most pedig jöjjön a HTML-es kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul id="navigacio">
	<li><a href="#doboz1">elso div</a></li>
	<li><a href="#doboz2">masodik div</a></li>
	<li><a href="#doboz3">harmadik div</a></li>
</ul>
 
<div id="informacio">
	<div id="doboz1">
		<P>elso div tartalma</P>
	</div>
	<div id="doboz2">
		<P>masodik div tartalma</P>
	</div>
	<div id="doboz3">
		<P>harmadik div tartalma</P>
	</div>
</div>

Egyben az egész kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV-ek váltása javascript segítségével</title>
<style type="text/css">
#doboz1, #doboz2, #doboz3 { 
	display: block;
	width: 500px;
	border:1px solid #f1f1f1;
	padding: 5px;
	margin-top: 3px;
	}
	#doboz1 { background-color: green; }
	#doboz2 { background-color: yellow; }
	#doboz3 { background-color: grey; }
</style>
<script type="text/javascript" language="javascript">
window.onload=function()
{
    var obj=document.getElementById('navigacio').getElementsByTagName('A');
    for(i=0;i<obj.length;i++){
        obj[i].href_=obj[i].href;
        obj[i].href='javascript:void(0)';
        obj[i].onclick=function(){
            for(j=0;j<obj.length;j++){
                document.getElementById(obj[j].href_.split('#')[1]).style.display='none';
            }
            document.getElementById(this.href_.split('#')[1]).style.display='block';
        }
    }
 
    var firstpage='doboz1';
 
    for(i=0;i<obj.length;i++){
        var contentdiv=document.getElementById(obj[i].href_.split('#')[1]);
        if(contentdiv.id!=firstpage)contentdiv.style.display='none';
    }
}
</script>
</head>
 
<body>
 
<ul id="navigacio">
	<li><a href="#doboz1">elso div</a></li>
	<li><a href="#doboz2">masodik div</a></li>
	<li><a href="#doboz3">harmadik div</a></li>
</ul>
 
<div id="informacio">
	<div id="doboz1">
		<P>elso div tartalma</P>
	</div>
	<div id="doboz2">
		<P>masodik div tartalma</P>
	</div>
	<div id="doboz3">
		<P>harmadik div tartalma</P>
	</div>
</div>
 
</body>
</html>
Kapcsolódó bejegyzések:
  • Ha különböző adatokat tartalmazó táblákat szeretnék kinyíló, bezáródó effekttel ellátni, használd az alábbi kódot (expand, collapse effect)tabl …

  • Néha jól jön, hogy egy lapon egyes tartalmakat alapértelmezetten el lehet rejteni a szemek elől (helyspórolás, átláthatóság stb..), persze nem véglegesen, csak á …

  • A többnyelvű honlapokon szinte mindig van egy ilyen kis zászlócskás nyelvválasztó az oldalon. Ha grafikailag rendben is vannak, egy probléma gyakori: nem elérhet …

  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • A minap belefutottam egy egyszerű problémába: kattintható kell tenni egy DIV teljes területét. A megoldás egyszerű, remélem lesz akinek megspórolok vele – ha más …

A cikket beküldte: Harder (http://blog.harder.hu)

6 hozzászólás

  1. Bálint says:

    Üdv! Pont ilyen javascriptet keresek az iframe helyett. Jó a funkció megnéztem, de mi a helyzet ha egy javascript menübe akarom ezt beágyazni??
    Tehát itt doboz1, doboz2 és doboz3-om a menü gombok h tudom átírni h az én javas. menüm menüpontjai hozzák be az általam létrehozott oldalakat.
    úgyan úgy szeretném mintha iframet használnék csak ez a script hívná be a lapokat..
    Tehát mit hova kell átírni??

  2. Daemia says:

    Bálintnak!

    Helló,
    mint láthatod ezt a részt:

    elso div
    masodik div
    harmadik div

    ez akár lehetnek menüpontok is csak olyan nevet adj neki :-)

  3. Bálint says:

    Köszönöm a választ kedves Daemia de elértetted a kérdésemet.
    Ami szerettem volna meg még most is h egy már létező javascript menüt szeretnék átírni úgy h a funkciója olyan legyen mint itt.
    Ami menüt szeretnék átírni azt kívülről hívom be. Próbálkoztam összerakni a kettőt de nem jártam sikerrel. A kérdés h így látatlanban van e rá megoldás vagy rakjam be ide a menüt amit szeretnék átírni?? Jah és mennyire keresőbarát ez a megoldás mert ez helyett találtam egy másikat de ott a cserélendő lapok tartalmát nem látta a kereső:S
    A válaszod előre is köszönöm!

  4. Pemegény says:

    Köszi! Nagyon jó tutorial
    Pont ilyet keretem, és működik!
    Éda

  5. vmarci21 says:

    Heló,
    az lenne a problémám, hogy az oldalamba 2 ilyet akarok berakni, de bármit csinálok, mindig összeakadnak.
    Valaki tudna segíteni?

  6. Robert says:

    Hello!
    Hogyan lehet az aktiv linket megjelölni, hogy éppen melyik oldalon vagyok.
    Css-el próbáltam, de csak egy pillanatra működik. Gondolom a js-ben kell mókolni.

Szólj hozzá
a Tartalom váltása a lap újratöltése nélkül I. c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>