Content Switch

[ZipZek]

Hi, Ihr Lieben

Könnt Ihr mir bei folgendem Problem helfen?

also ich habe ein Contentbereich <div id="content"></div>
wo dann der Content geladen werden soll (logisch)
Am Anfang ist im Contentbereich ein Starttext oder Bild.

Desweiteren hab ich neben ein Menü mit 1,2,3,4,5,6 usw Links.

Klick ich jetzt auf Link 1 soll im Content ein Text und Bild geladen werden.
Klick ich auf Link 2 verschwindet Content 1 und der passende Text zu Link 2 wird geladen...

hört sich relativ einfach an, aber ich weiß nicht wie ich das realisieren soll.... mh

hoffe Ihr könnt mir helfen!

Gruß, Phil

 

[con-f-use]

Zwei Möglichkeiten:

Die Saubere benutzt die style.visibilty Eigenschaft. Der Content steht also bereits als versteckter div im Dokument und wenn dann der Link ausgelöst wird, werden alle diese versteckten divs versteckt und der gerade gewählte wird eingeblendet.

<div id="content0">blubb bla bla foo bar</div>
<div id="content1" style="display: none">blubb bla bla <b>Eins</b> foo bar</div>
<div id="content2" style="display: none">blubb bla bla <b>Zwei</b> foo bar</div>
<div id="content3" style="display: none">blubb bla bla <b>Drei</b> foo bar</div>

<a href="#" onclick="return swapContent(0)">Urspr&uuml;nglichen Content anzeigen</a>
<a href="#" onclick="return swapContent(1)">Inhalt 1</a>
<a href="#" onclick="return swapContent(2)">Inhalt 2</a>
<a href="#" onclick="return swapContent(3)">Inhalt 3</a>


<script type="text/javascript">
function swapContent(num) {
    for(i=0; obj = document.getElementById('content'+ i); ++i)
        obj.style.display = 'none';
    document.getElementById('content'+ num).style.display = 'block';
    return false;
}
</script>

Die Dreckige arbeitet mit innerHTML und einem Array, dass den jeweiligen Content speichert:

<div id="content">blubb bla bla foo bar</div>

<a href="#" onclick="return swapContent(0)">Urspr&uuml;nglichen Content anzeigen</a>

<script type="text/javascript">
arr = [
'blubb bla bla foo bar',
'blubb bla bla <b>Eins</b> foo bar',
'blubb bla bla <b>Zwei</b> foo bar',
'blubb bla bla <b>Drei</b> foo bar'
];

function swapContent(num) {
    obj = document.getElementById('content');
    obj.innerHTML = arr[num];
    return false;
}
</script>

Nun ist noch zu sagen, dass es zu sowas wirklich 1000 Weblinks gibt und auch die Forensuche dieses Boards einiges hätte ausspucken sollen. Bitte frag das nächste Mal erst dann, wenn du alle diese Mittel ausgeschöpft hast. Danke!