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>
Hugyecz Görgy (Harder)
Hugyecz Görgy (Harder)
http://blog.harder.hu
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.
Facebook Linkedin

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

6 HOZZÁSZÓLÁS

  1. Ü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??

  3. 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!

  5. 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. 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.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét