myGully.com - (Javascript) getElementById

myGully.com (https://mygully.com/index.php)

- Entwicklung & Programmierung (https://mygully.com/forumdisplay.php?f=72)

- - (Javascript) getElementById (https://mygully.com/showthread.php?t=2339795)

(Javascript) getElementById

Ich wollte meine HP etwas übersichtlicher gestalten, sprich eine Auswahl aus 6 Buttons und wenn man eines der Buttons anklickt, dass sich sozusagen ein "toggle" öffnet unter den Buttons welches den spez. Inhalt dafür ausgibt. Dies habe ich auch in etwa gelöst, nur dass die einzelnen Rubriken sich untereinander nun öffnen und nicht wie gewünscht, sobald man Bild 2 klickt content aus 1 verschwindet und der 2. content sich öffnet:

Codebeispiel:

Code:

<a href="javas*****:;" onmousedown="if(document.getElementById('mydiv').style.display == 'none'){ document.getElementById('mydiv').style.display = 'block'; }else{ document.getElementById('mydiv').style.display = 'none'; }"><img src="styles/images/beispiel.png"></a>

Code:

<div id="mydiv" style="display:none">Dies ist Content 1</div>

Hat jemand eine Ahnung wie ich das so setzen kann, dass sobald Bild 2 angeklickt wird, nicht Content 2 unter Content 1 erscheint, sondern Content 1 schliesst und sich Content 2 öffnet?

Alles ganz ohne doctype oder dergleichen.
Kannste anpassen wie du lustig bist.
have fun
sirleo

edit :
ich gehe mal davon aus das du HTML 4 oder 5 nimmst, solltest du dich zu XHTML hinreißen lassen musst du den JS-Code entweder ganz speziell ausklammern oder in eine extra datei auslagern.

Vielen Dank für deine Antwort, vll. habe ich einen Denkfehler, aber ich habe den IMG-Tag etwas geändert, da deine Preview mit INPUT war:

Code:

<a href="javas*****:;" onclick="javas*****:testfunc(this);" value="id1"><img src="styles/images/beispiel.png" alt="Beispiel"></a>

Bilder werden korrekt angezeigt, unten ist nun enorm viel Platz, da er wohl den Content und meine gesetzten <br /> für 6 Contents anzeigen will. Ansonsten erfolgt jedoch keine Funktion.

Also ich weiss zwar nicht was du mit dem letzten absatz sagen wolltest aber zu dem ersten:
arbeite mit den display properties von CSS.

Ich muss das Bild ja iwie verlinken, deswegen habe ich IMG -> onclick gesetzt.

Bei mir wird aktuell nur leerer Content aus allen 6 Contents ausgegeben mit dem Code aus meinem 2. Post.

Gruss

Das führt zu nichts, gib ein Beispielcode, und sag wie es aussehen sollte.
Ich weiss nähmlich absolut nicht was du meinst.

So soll es später ausschauen:

http://666kb.com/i/bufqdzwne5b5k6whk.jpg

PHP-Code:


		
			
<s***** type="text/javas*****">

            var before = "";

            function testfunc(variable){

                if(before != "")

                    document.getElementById(before).style.visibility = "hidden";

                document.getElementById(variable.value).style.visibility = "visible";

                before = variable.value;

                }

        </s*****>

<table>

    <tr>

<th class="c" colspan="3"><b>Titleheader</b></th>

                </tr>

                <tr>

<td colspan="1" class="l"><br>



<a href="javas*****:;" onclick="javas*****:testfunc(this);" value="id1"><img src="styles/images/content1.png" alt="Conetnt">&nbsp;&nbsp;&nbsp;</a>

<a href="javas*****:;" onclick="javas*****:testfunc(this);" value="id2"><img src="styles/images/content2.png" alt="Content">&nbsp;&nbsp;&nbsp;</a>

<a href="javas*****:;" onclick="javas*****:testfunc(this);" value="id3"><img src="styles/images/content3.png" alt="Content">&nbsp;&nbsp;&nbsp;</a>

<a href="javas*****:;" onclick="javas*****:testfunc(this);" value="id4"><img src="styles/images/content4.png" alt="Content">&nbsp;&nbsp;&nbsp;</a>

<a href="javas*****:;" onclick="javas*****:testfunc(this);" value="id5"><img src="styles/images/content5.png" alt="Content">&nbsp;&nbsp;&nbsp;</a>

<a href="javas*****:;" onclick="javas*****:testfunc(this);" value="id6"><img src="styles/images/content6.png" alt="Content"></a>



<div id="id1" style="visibility:hidden"><br><br>Content 1</div>

<div id="id2" style="visibility:hidden"><br><br>Content 2</div>

<div id="id3" style="visibility:hidden"><br><br>Content 3</div>

<div id="id4" style="visibility:hidden"><br><br>Content 4</div>

<div id="id5" style="visibility:hidden"><br><br>Content 5</div>

<div id="id6" style="visibility:hidden"><br><br>Content 6</div>



</td></tr></table>

Weil das Element a kein Attribut value besitzt.
Du musst immer dran denken, das HTML dafür ausgelegt ist robust zu sein,dh
es wird dir viele Fehler verzeihen.

Hier der Code, und noch ein kleiner designvorschlag:
Du kannst mittels CSS alle Elemente Übereinanderlegen, und dann nur das ausgewählte Anzeigen, das erlaubt dir eine bessere Platzausnutzung deiner Seite und sieht schicker
aus da der Benutzer nicht immer das neue Element auf der Seite neu Suchen muss.
Und, verwende keine Tables, mit CSS biste flexibler.
So long

Vielen Dank für deine Hilfe,... kleines Problem gibt es leider noch:

http://666kb.com/i/bug2wkmm89c80ajnc.gif

Das wechseln des Contents klappt mit deiner Hilfe nun einwandfrei, leider legt er pro <DIV> einen sogenannten Platzhalter, sodass Content 2 eine Zeile tiefer angezeigt wird und Content 3 wiederum eine Zeile tiefer.

Bei Content 6 wäre man dann schon bei der 6. Zeile, was im Endeffekt kein Platzersparnis bringen würde.

Ich rede von dem Platzieren der Bilder nicht von dem Platzieren der Links.
btw du hast sie untereinander gelegt nicht übereinander.

Ja das mit den Bildern ist Fast & Dirty, wird natürlich optimiert :T
Das Phänomän tritt auch auf, wenn ich alle DIVs in eine Zeile packe. Normalerweise sollte Content 2,3,4,5,6 in der gleiche Zeile wie Content 1 erscheinen.

Gruss

hmm 2 möglichkeiten.
1.css
2. du benutzt <span>.
Unterschied zwischen div und span ist gering aber vorhanden, dank CSS aber nicht mehr sehr weitreichend.
mfg

sirleo

<span> hat geholfen :D

Nu isses in einer Reihe, nur lässt sich nu nicht positionieren Content 1 fängt von ganz links an, und Content 2 würde eher mittig anfangen, also da wo eigtl. Content 1 stoppen würde.

versteh deine aussage zwar gerade absolut nicht, aber meine kristallkugel sagt das du layoutprobleme hast ->CSS is your friend