Kezdőoldal » Számítástechnika » Weblapkészítés » Hogy tudom azt megcsinálni,...

Hogy tudom azt megcsinálni, hogyha a menüben rákattintok egy linkre, akkor az egy másik div-ben nyíljon meg?

Figyelt kérdés

Csináltam egy 3oszlopos oldalt, +fejléc, lábléc, és azt szeretném elérni, hogy ha az oldalmenüből rákattintok egy linkre, akkor az a középső div -ben nyíljon meg úgy, hogy a fejléc és a két oldali menü maradjon a helyén és ne töltődjön be újra. iframe -el próbálkoztam, de ha dinamikusan változik az oldal tartalma megnő, és akkor scrollozhatóvá válik az iframe, amit nem szeretnék. Jó lenne ha az oldal tartalmához igazodna, vagyis lefelé megnőne. (Lehet hogy nem jól fogalmaztam, de azért remélem értitek)

Köszönöm a segítséget


2010. márc. 4. 16:51
 1/4 anonim ***** válasza:

Első nem előnyös megoldás:

Minden menühöz megcsinálod az egész oldalt és a tartalmi rész lesz változatos, a menüre kattintva egy új lap nyílik meg ami ugyanúgy néz ki csak más a tartalma.

Nem célravezető megoldás, ha időnként változik az oldal tartalma, menüje, mert akkor mindenütt át kell írni.



Viszont ha azt szeretnéd, hogy teljes oldal újratöltődése nélkül legyen csak a középső részben más tartalom akkor

mint mondtad a keretes megoldást, de ha az nem tetszik akkor pl: javascript vezérlésel tudod megoldani

első betöltődéskor minden menüoldal betöltődik és a gombokra kattintva más más tartalmi részt jelenit meg középen.

egy másik oldalra már bemásoltam egy ilyen megoldást, de ide is beszúrom:


De megtaláltam azt is ahol ezt a lehetőséget láttam bemásolom a forráskódját.

<html>


<head>

<title>DHTML alapú WEB-lap</title>


<script>


function megjelenit(mit) {

document.getElementById('nyitolap').style.display='none';

document.getElementById('oldal_1').style.display='none';

document.getElementById('oldal_2').style.display='none';

document.getElementById('oldal_3').style.display='none';

document.getElementById('oldal_4').style.display='none';

document.getElementById('oldal_5').style.display='none';


document.getElementById(mit).style.display='';

}


</script>


</head>


<body>


<table width="100%" height="100%" cellspacing="0" cellpadding="0">

<tr>


<td width="30%" align="center" bgcolor="#D2D2D2" valign="top">

<br><br>

<a href="#" onClick="megjelenit('nyitolap')">Nyitólap</a>

<br><br><br>

<a href="#" onClick="megjelenit('oldal_1')">1. oldal</a><br><br>

<a href="#" onClick="megjelenit('oldal_2')">2. oldal</a><br><br>

<a href="#" onClick="megjelenit('oldal_3')">3. oldal</a><br><br>

<a href="#" onClick="megjelenit('oldal_4')">4. oldal</a><br><br>

<a href="#" onClick="megjelenit('oldal_5')">5. oldal</a><br><br>

</td>


<td width="70%" bgcolor="#FFFFCC" valign="top">


<div id="nyitolap" style="height:100%;background:#FFFFCC;padding:20">

<br>

<b>Üdvözlünk ezen az egyszerű WEB-lapon!</b>

<br><br>

A bal oldali menüpontokra kattintva ebben a keretben betöltődnek az egyes aloldalak...

</div>


<div id="oldal_1" style="display:none;height:100%;background:#CCFFCC;padding:2

0">

<br>

<b>1. oldal</b>

<br><br>

Ez az első oldal szövege...

</div>


<div id="oldal_2" style="display:none;height:100%;background:#CCFFFF;padding:2

0">

<br>

<b>2. oldal</b>

<br><br>

Ez a második oldal szövege...

</div>


<div id="oldal_3" style="display:none;height:100%;background:#FFECEC;padding:2

0">

<br>

<b>3. oldal</b>

<br><br>

Ez a harmadik oldal szövege...

</div>


<div id="oldal_4" style="display:none;height:100%;background:#DDDDFF;padding:2

0">

<br>

<b>4. oldal</b>

<br><br>

Ez a negyedik oldal szövege...

</div>


<div id="oldal_5" style="display:none;height:100%;background:white;padding:20"

>

<br>

<b>5. oldal</b>

<br><br>

Ez az ötödik oldal szövege...

</div>


</td>

</tr>

</table>


</body>


</html>


Ha kicsit is értesz a forráskódokhoz akkor ezt feltudod magadnak haszni úgy ahogy akarod.

A tartalmi részbe berakod az összes tartalmi div ablakot külön azonosítóval id="oldal_1" vagy akár másként elnevezve.


A head részbe berakod a JS kódot ami elvégzi a cserét.

a menü részbe pedig a menü kódot a hozzá tartozó azonosítóval.


ha a div id="tigris" akkor a menüben is onClick="megjelenit('tigris')"


továbbá a JS részben is

document.getElementById('tigris').style.display='none';

2010. márc. 4. 18:33
Hasznos számodra ez a válasz?
 2/4 anonim ***** válasza:

<iframe scrolling="no">


Valamint nem adsz meg neki magasságot, csak szélességet. Így nem jó?

2010. márc. 4. 22:03
Hasznos számodra ez a válasz?
 3/4 A kérdező kommentje:

Első válaszadónak üzenem,: hogy tök király, nagyon jó, pont ez az amit kerestem és nagyon szépen köszi a segítséget.


Második válaszoló: Sajnos nem jó úgy sem, mert valamiért összeugrik az ifram-em ha nem adok neki magasságot, és ha nem engedem scrollozni, akkor meg meg sem jeleníti a túlcsorduló tartalmat. Úgy megtudtam csinálni hogyha fix width=""és height="" értékeket adtam, de ha a tartalom megnő akkor scrollozhatóvá válik amit szeretnék elkerülni.

Köszönöm a segítségeket

2010. márc. 5. 13:21
 4/4 A kérdező kommentje:
Még egy kérdés: Nagyon jó a script, meg is csináltam az oldalt, de ha jól értelmezem, akkor az összes oldalt az index fájl-ba kell raknom hogy ez így működjön? Ez így nagyon megnöveli a fájl méretét. Úgy nem lehet hogy külön fájlokba rakom az oldalakat és a linkre kattintva ugyan úgy a tartalom részbe töltené be?
2010. márc. 5. 15:23

Kapcsolódó kérdések:




Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!