JavaScript HTML Tabellen aus/einblenden

[Sumit]

Tag allerseits,

Ich habe bereits einiges probiert aber leider bekomme ich folgendes nicht ohne "nebenwirkungen" hin.
Ich möchte folgendes:

Ich habe eine Seite in HTML mit einigen PHP includes und der übliche kram eben.
JEtzt möchte ich, dass sich z.B. bei einem Klick auf einen Navigationspunkt die ganze Struktur der Seite ändert.

So das ich quasi in der index.html die selbe komplette Seite (Tabellen) 2 (oder auch mehrmals) habe. Im unteren beispiel soll das eben so sein: Wenn ich auf link1 klicke soll die seite als table id1 angezeigt werden. Und wenn man auf link2 klickt, solls als table id 2 angezeigt werden

<table blablabla ID="1">
<a href="link1" onclick="zeige tabellenID 1"><a href="link2" onclick="zeige tabellenID 2">
lalalala phph script blalba
</table>

<table blablabla ID="2" style="display:none">
<a href="link1" onclick="zeige tabellenID 1"><a href="link2" onclick="zeige tabellenID 2">
lalalala phph script blalba
</table>

der urpsünglich aufgerufene Link sollte aber beibehalten werden.

Is das irgendwie möglich?

lg

Sumit


EDIT:
diese scribt benutzt ich zwar nicht, aber hier: http://cms.webspell.org/
ist es ungefähr so wie ich es will. Bei einem klick auf "Forum" wird die rechte tabellenspalte ausgeblendet (verschwindet) und die mittlere wird dementsprechend vergrößert. So ungefähr solls sein

 

[Aretzran]

Hi

dann schreib deine Seite regelkonform.
In Zeiten von CSS haben Tabellen nichts mehr zu suchen.
das ganze lässt sich mit divs viel leichter und sauberer umsetzen.

gruss

 

[nichtsooft]

Heute ist wohl jeder der ein wenig mit Photoshop rumspielst schon Webdesigner!? Wozu studier ich eigentlich Informatik... *lach*

Also: Javascript funktion....

function foldOut(what) {
 var foldOutDiv = document.getElementById('foldOutDiv'+what);
 var foldOutImage = document.getElementById('foldOutImage'+what);
 var foldOutLink = document.getElementById('foldOutLink'+what);
   if (foldOutDiv.style.display == "none")	{
	foldOutDiv.style.display = "";
	foldOutImage.src = "pics/minus.gif";
	foldOutImage.alt = "-";
	foldOutLink.title = 'Einklappen';
   } else {
	foldOutDiv.style.display = "none";
	foldOutImage.src = "pics/plus.gif";
	foldOutImage.alt = "+";
	foldOutLink.title = 'Ausklappen';
   }
}

Und die lustigen DIVs...

echo "<DIV CLASS=\"deine_class\">Überschrift</DIV>\n";
echo "<DIV CLASS=\"nochne_class\">\n";
      echo "<A ID=\"foldOutLinkSatz1\" TITLE=\"Ausklappen\" HREF=\"javascript:foldOut('Satz1',0);\" OnClick=\"this.blur();\">\n";
      echo "<IMG ID=\"foldOutImageSatz1\" SRC=\"pics/plus.gif\" STYLE=\"width: 11px; height: 11px; border: 0px; margin: 5px 0 0 5px;\" ALT=\"+\"></A>\n";
echo "</DIV><BR STYLE=\"clear: both;\">\n";
echo "<DIV CLASS=\"deine_class2\" STYLE=\"display: none;\" ID=\"foldOutDivSatz1\">\n";
      echo "Und da packen wa ein bissele nen Text rein...<BR><BR>\n";
      echo "<B>UNSER ZIEL: </B>Wir wolln es klappen sehn...\n";
echo "</DIV>\n";

Have P.H.U.N.!

 

[Sumit]

Hallo

@ nichtsooft: danke für den Code. Ich spiele nicht mit Photoshop rum, ich arbeite mit Fireworks. Schon lange! Bisher war einfach die notwendigkeit auf divs/CSS umzusteigen nicht da. Und ein Informatik student kann sich auch nicht notwendigerweise webdesigner nennen ;-)

Nachdem mir nun hier gesagt wurde ich solle mein Layout mit divs und CSS umsetzen, habe ich das getan. Demnach ist wohl die einfachere und sauberere Lösung für mich aktuell.

Ich hatte an eine funktion gedacht die einfach bei ner bestimmten adresse in der adresszeile des browsers die css-datei auf die zugegriffen wird ändert. Das wäre schon sehr hilfreich, aber es lässt sich dann wohl nicht so umsetzen wie ich es wollte weil speziell ein bild nicht per css eingefügt wird. Aber da find ich dann schon was.

Falls die Javascript funktion etwas einfacher ist, würde ich mich auch über einen nützlichen Link für anfänger freuen. Denn ich bin keiner der die sache mit copy & paste regelt. Ich will es lernen und verstehn. Also helft mir, mir selbst zu helfen ;-) bitte!

lg

Sumit

 

[rocket81]

Hallo,
der Thread ist zwar schon was älter passt aber grad gut zu meiner Frage.
Wie kann ich bei dem Script von nichtsooft die Funktion hinzufügen, dass der ausgeklappte Text ersetzt wird wenn man mehrere Texte hat und nicht alle auf einmal geöffnet werden?
Ist jetzt n bisschen schwierig zu erklären deshalb hier mein Beispiel:

<DIV CLASS="deine_class">Überschrift</DIV>
<DIV CLASS="nochne_class">
<A ID="foldOutLinkSatz1" TITLE="Ausklappen1" HREF="javascript:foldOut('Satz1',0);" OnClick="this.blur();">1</A>
&nbsp;
<A ID="foldOutLinkSatz2" TITLE="Ausklappen2" HREF="javascript:foldOut('Satz2',0);" OnClick="this.blur();">2</A>
</DIV><BR STYLE="clear: both;">
<DIV CLASS="deine_class2" STYLE="display: none;" ID="foldOutDivSatz1">
1
</DIV>
<DIV CLASS="deine_class2" STYLE="display: none;" ID="foldOutDivSatz2">
2
</DIV>

Bei dem Beispiel soll also wenn ich z.b. auf 1 klicke 1 angezeigt werden und wenn ich dann auf 2 klicke 2 STATT 1 angezeigt werden.
Ich hoffe dadurch wurds jetzt verständlich.

Ansonsten wäre es noch ganz schön wenn sich der text langsam ausklappen würde, kann man das auch irgendwie bewerkstelligen?

 

[Tumbleweed]

Wenn du bereit bist jQuery einzubinden, kannst du das alles recht einfach realisieren. Ich versuchs mal aus der Hüfte:

	<div class="header">Überschrift</div>
	<div class="toggleButtons">
		<a href="#" id="toggleButton1">Zeige div 1</a>
		<a href="#" id="toggleButton2">Zeige div 2</a>
	</div>
	<div id="div1" style="display: none;">
		Hier bin ich versteckt
	</div>
	<div id="div2" style="display: none;">
		und hier ich!
	</div>
	
	<script type="text/javascript">
		
		$("#toggleButton1").click(function()
		{
			if ($("#div2").is(":visible"))
				$("#div2").slideToggle();
			$("#div1").slideToggle();
		});
		
		$("#toggleButton2").click(function()
		{
			if ($("#div1").is(":visible"))
				$("#div1").slideToggle();
			$("#div2").slideToggle();
		});
	</script>

 

[rocket81]

okay danke, das funktioniert soweit ganz gut. nur was mache ich wenn ich 3 oder mehr texte habe?

 

[Tumbleweed]

Das ist nur eine Frage des selectors. Vorher sprach ich die divs per konkreter ID (die ja einzigartig sein müssen) an. Du könntest aber zum Beispiel allen zugehörigen Klapptexten eine (gleiche) class (die ja mehrfach auftreten dürfen) geben und dann sowas machen wie

            // Egal welches Element mit class klappText angeklickt wird
            $(".klappText").click(function()
            {
                // Mach es auf/zu
                $(this).slideToggle();
                
                // Und alle anderen die offen sind zu
                $(".klappText").not(this).each(function()
                {
                    if ($(this).is(":visible"))
                        $(this).slideUp();
                });
            });

Das ist natürlich alles nicht durchdacht sondern einfach nur zusammengezimmert, um das Prinzip zu demonstrieren. Das Beispiel hier wäre auch dafür ausgelegt, dass man auf die klappText divs selbst klickt, was natürlich Blödsinn ist, wenn sie invis sind, aber ich denke du verstehst das Prinzip.