XHTMLforum - HTML div inhalt ändern problem

XHTMLforum (http://xhtmlforum.de/index.php)

- (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)

- - HTML div inhalt ändern problem (http://xhtmlforum.de/showthread.php?t=64772)

HTML div inhalt ändern problem

hallo ich weiß das thema wurde oft behandelt nur finde ich nichts, was mir weiter hilft . Also zur problem stellung :

Ich habe 2 Divs. in dem einen diff stehen ca 5 Werte ( also mit p )
und ich möchte das wenn man auf einen der werte klickt das dann im 2. diff etwas erscheint z.B.
1 Wert = 2. Div -> Hallo
2 Wert = 2. Div -> Kallo

Im moment sieht der Code so aus , dass im 2. Diff immer das gleiche steht, und das will ich ja nicht haben

Dazu habe ich folgenden html code

HTML-Code:

                <div id="liste" align="left">

                        <h3 align="center">Textverarbeitung<hr></h3>

                                

                        <table>

                                <tr><td><p>Notepad ++<p></td><tr>

                                <tr><td><p>mallo2<p></td><tr>

                                <tr><td><p>hallo3<p></td><tr>

                                <tr><td><p>mallo4<p></td><tr>

                                <tr><td><p>hallo5<p></td><tr>

                                <tr><td><p>mallo6<p></td><tr>

                                <tr><td><p>hallo7<p></td><tr>

                                <tr><td><p>mallo8<p></td><tr>        

                        </table>

                </div>

                <div id="informationen" align="left">

                        <h2> Notepad ++ </h2><hr>

                        

                        <p> Das programm hat blaaa und blaaaa und kann blaaaa und hier nix und da nix und desweiteren erst recht nichts einfach top dieses

                                nichts könner programm. </p>

                        <a href="Notepad++"><p><u>Weiter<u><p></a>

                        

                </div>

Zur erklärung es ist ein Schulprojekt wo wir eine Software sammlung machen sollen. Das erste Programm ist in dem Fall " Notepad ++ " und dann soll halt das bla bla bla angezeigt werden, und wenn man auf das nächste klicken würde , in dem fall " mallo 2" soll was anderes angezeigt werden

Das kannst du erreichen, indem du die Seite neulädst und beispielsweise über php den Inhalt tauschst.

Übrigens ist deine Tabelle eher eine Liste ;)

Da brauchst du einfach nur javascript und tauschst die werte einfach nur aus.

und wie würde das java script aussehen?

Code:



<html>

<head>

 <script src="http://code.jquery.com/jquery-latest.js"></script>

 

 <script>

 $(document).ready(function(){

$("a").click(function(){

$(".text").remove();

$(".kann").remove();

});





$(".Notepad").click(function(){

        $(".programm").append("<div class=\"text\"> Text </div>");

        $(".programm2").append("<div class=\"kann\"> und kann Notepad </div>");



});





$(".mallo2").click(function(){

        $(".programm").append("<div class=\"text\"> mallo2 </div>");

                $(".programm2").append("<div class=\"kann\"> und kann  mallo2</div>");



});



$(".hallo3").click(function(){

        $(".programm").append("<div class=\"text\"> hallo3 </div>");

                $(".programm2").append("<div class=\"kann\"> und kann hallo3 </div>");



});



$(".mallo4").click(function(){

        $(".programm").append("<div class=\"text\"> mallo4 </div>");

                $(".programm2").append("<div class=\"kann\"> und kann  mallo4</div>");



});



$(".hallo5").click(function(){

        $(".programm").append("<div class=\"text\"> hallo5 </div>");

                $(".programm2").append("<div class=\"kann\"> und kann  hallo5</div>");



});



$(".mallo6").click(function(){

        $(".programm").append("<div class=\"text\"> mallo6 </div>");

                $(".programm2").append("<div class=\"kann\"> und kann  mallo6</div>");



});



$(".hallo7").click(function(){

        $(".programm").append("<div class=\"text\"> hallo7 </div>");

                $(".programm2").append("<div class=\"kann\"> und kann  hallo7</div>");



});



$(".mallo8").click(function(){

        $(".programm").append("<div class=\"text\"> mallo8 </div>");

                $(".programm2").append("<div class=\"kann\"> und kann  mallo8</div>");



});

 });

 </script>

<title>

</title>

</head>

<body>

        

        

        <div id="liste" align="left">

                        <h3 align="center">Textverarbeitung<hr></h3>

                                

                        <table>

                                <tr><td><p><a href"" class="Notepad">Notepad ++</a><p></td><tr>

                                <tr><td><p><a href"" class="mallo2">mallo2</a></p></td><tr>

                                <tr><td><p><a href"" class="hallo3">hallo3</a></p></td><tr>

                                <tr><td><p><a href"" class="mallo4">mallo4</a></p></td><tr>

                                <tr><td><p><a href"" class="hallo5">hallo5</a></p></td><tr>

                                <tr><td><p><a href"" class="mallo6">mallo6</a></p></td><tr>

                                <tr><td><p><a href"" class="hallo7">hallo7</a></p></td><tr>

                                <tr><td><p><a href"" class="mallo8">mallo8</a></p></td><tr>        

                        </table>

                </div>

                <div id="informationen" align="left">

                

                

                

                        <h2> Notepad ++ </h2><hr>

                        

                         Das programm hat :<div class="programm"></div> <p>Das Programm Kann :<div class="programm2"></div></p>

                                

                        <a href="Notepad++"><p><u>Weiter<u><p></a>

                        

                </div>

                

                

</body>

</html>

umständlich gelöst aber es funktioniert

Dann sage doch bitte dazu, dass du JQuery, o.ä. benutzt! Außerdem kann man sowas eleganter (und barrierefreier) über :target lösen.

gruß,
take

Zitat:

Zitat von take_a_7 (Beitrag 495101)

Dann sage doch bitte dazu, dass du JQuery, o.ä. benutzt! Außerdem kann man sowas eleganter (und barrierefreier) über :target lösen.

gruß,
take

Jo hätte ich sagen können, und das man es eleganter lösen kann weiß ich deshalb sagte ich ist umständlich gelöst

Zitat:

Zitat von take_a_7 (Beitrag 495101)

Dann sage doch bitte dazu, dass du JQuery, o.ä. benutzt! Außerdem kann man sowas eleganter (und barrierefreier) über :target lösen.

gruß,
take

Hallo,

Da ich immer versuche, alles so weit wie möglich javascript- und barrierefrei zu erstellen, bin ich auch schon über das :target gestolpert.
Hier ist zur Ergänzung eine Seite, die das demonstriert:

~marcus - Webdesign: CSS-Tabs

Leider funktioniert das im IE8 immer noch nicht.
Was meint ihr, wäre in diesem Fall Eric Meyers CSS-PopUp eine Lösung,
oder empfielt sich das nicht bei großen Datenmengen?

Pure CSS Popups

Gruß
manya

Edit:
noch gefunden:
CSS: eine Oberfläche mit Registerkarten

hallo also dein script funktioniert wunderbar nur hab ich noch eine frage

ich muss ja die werte immer anklicken,damit sich der content verändert. Geht das auch mit Mouse Over??

Und ein anderes Problem ist, dass ich ja diese Softwaresammlung auf eine Cd packe wo nur html dateien drauf sind. Da PHP nur im zusammenhang mit einem Server funktioniert frage ich mich, ob es eine möglichkeit gibt, Programme wie " setup.exe" mit java oder was anderes zu starten bzw. öffnen?

Zitat:

Zitat von gabbasnake (Beitrag 495346)

ich muss ja die werte immer anklicken,damit sich der content verändert. Geht das auch mit Mouse Over??

überall wo .click steht durch .mouseover ersetzen