Hallo!
Ich bin gerade beim Programmieren meiner Homepage.
Ich möchte nun auf einer Seite dynamisches HTML anwenden, um auf Mausklick in einem Text verschiedene "versteckte" Elemente einzublenden. Also, der Text besteht aus mehreren Absätzen, die von verschiedenen Leuten stammen, und auf Mausklick sollen (am besten rechts daneben in einer extra-Spalte) sämtliche Namen der Leute eingeblendet werdne, ohne dass die Seite neu geladen werden muss.
Leider kenne ich mich mit Dynamischem HTML nicht aus. Kann mir jemand sagen, wie ich das bewerkstelligen kann?
Dynamisches HTML - versteckte Absätze einblenden
-
Würde ich mit Javascript machen, weiss nicht obs ne einfachere Möglichkeit gibt.
Code
Alles anzeigen<script type="text/javascript"> function anzeigen(das){ if(document.getElementById(das).style.display=='none') document.getElementById(das).style.display='block'; else document.getElementById(das).style.display='none';} </script>HTML<a href="#" onclick="javascript: anzeigen('bezeichnung')">Anzeigen</a> <span id="bezeichnung" style="display: none;"> HIER DER VERSTECKTE TEXT </span> -
Einfach alles, was per Mausklick eingebunden wird, dort einfügen.
Ob da Absätze drin sind, ist egal.EDIT: <span> musst du du dann zu <p> (oder einem anderen Blockelement) machen.
-
ich hab sowas mal verwendet.
die eizelnen bereiche hab ich in aber in nen div-container verpackt, und den per javascript auf/zumachen zu könnenif(document.getElementById(personID).style.display=="block")
{
document.getElementById(detailID).style.display="none";
document.getElementById(detailID).style.height=0;
}
else
{
document.getElementById(detailID).style.display="block";
document.getElementById(detailID).style.height="auto";
} -
schreib anstelle des <span> mal ein <div>, dann sollte deine javascript-funktion richtig sein
-
Dazu wäre mir jetzt folgende Idee gekommen, die bei einem kurzen Test auch geklappt hat.
JS Code bleibt gleich, aber:
HTML
Alles anzeigen<a href="#" onclick="javascript: anzeigen('bezeichnung'), anzeigen('bezeichnung2')">Anzeigen</a> <span id="bezeichnung" style="display: none;"> HIER DER VERSTECKTE TEXT </span> <p> Hier ein Text, der immer erscheint. </p> <span id="bezeichnung2" style="display: none;"> HIER DER VERSTECKTE TEXT 2 </span> -
edit:
hab mir die zeit genommen nochmal alles zu lesen...
also ich hab zwar keinen link für dich, dafür kannste aber auf die tabelle klicken....
styles musste anpassen und es is ratsam jquery in deinen eigenen webspace zu packen, statt ihn wie ich es mache von googlecode zu sucken....lange rede gar kein sin
hier der code.... (jquery is zwar gewöhnungsbedürftig, aber wenn mans mal kapiert hat fruchtet die sau ohne zu mucken)HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>scratchFile</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $('#mytable').ready(function(){ $('#mytable').click(function(){ $('.hidden').toggle(); }); }); /* ]]> */ </script> <style type="text/css"> #mytable{ cursor:pointer; } #mytable tr td{ width:200px; padding:10px; } .hidden{ display:none; } </style> </head> <body> <table id="mytable" border="1"> <tr> <td> <div> hier steht ein text<br /> bla blubb...<br /> hier noch wat blubber </div> </td> <td> <div class="hidden"> gustav gans<br /> bernhard bürzel<br /> vater frost </div> </td> </tr> <tr> <td> <div> hier steht ein text<br /> bla blubb...<br /> hier noch wat blubber </div> </td> <td> <div class="hidden"> peter pan<br /> jürgen jarolin <br /> detlef damenklo </div> </td> </tr> </table> </body> </html>das ganze sieht dann fertig so aus: http://home.arcor.de/olewat/einblenden.html
-
mach mal deinen quelltext fertig(ruhig mit dummytexten oder anderen beispielinhalt), wenn ich dann heute abend daheim bin, nehm ich den und werd das script entsprechend anpassen.
denke ich bin gegen 19 uhr daheim (hoffe du kannst noch bis dahin warten)
vorher klappts leider net, da ich heut nen arsch voll zu programmieren hab -
Machs sonst mal lieber so:
HTML<script type="text/javascript"> function anzeigen(id){ span = document.getElementById(id).style.display; if(span == "none"){ document.getElementById(id).style.display = "block"; }else{ document.getElementById(id).style.display ="none"; } } </script>Es kann sein, dass du mit dem Leerlassen des display: Fehler erhältst.
Wenn du die Funktion nur für Block-Elemente, wie divs oder Absätze brauchst, dann ist die obige Lösung besser.
Ansonsten bräuchtest du etwas, womit du sagst, ob es inline oder block ist. -
Hab mich mal für dich drangesetzt.
Demo: http://hid.white-tiger.ch/show.htmlHTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Javascript Funktion show()</title> <script type="text/javascript"> //<![CDATA[ function show(obj, style_display){ // obj = ID des Objektes, welches angezeigt werden sollte. // style_display = Zeigt, wie es dargestellt werden sollte (block, inline, etc.). var el = document.getElementById(obj).style; if(el.display != 'none') { el.display = 'none'; } else { el.display = style_display; } } //]]> </script> </head> <body> <div> <a id="a" href="javascript:show('testid','block')">Anzeigen/Verstecken 1. Absatz</a><br /> <p id="testid" style="display: none">Ich bin nicht da..</p><br /> <a href="javascript:show('nixda','block')">Anzeigen Verstecken von zweitem Absatz</a><br /> <p id="nixda" style="display: none">Ich bin auch nicht da..</p><br /> <a href="javascript:show('inline','inline')">Anzeigen Verstecken von Inline-Element</a><br /> <span id="inline" style="display: none">Ich bin auch nicht da..</span> </div> </body> </html> -
Na klar:
http://tools.white-tiger.ch/standalone/show.html
Hab einfach gepröbelt, bis es ging, aber dadurch lerne ich dazu :D.. Brauchte ca. 30 Minuten.