zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden HTML div inhalt ändern problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.05.2011, 17:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.05.2011
Beiträge: 4
gabbasnake befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.05.2011, 17:23
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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

Übrigens ist deine Tabelle eher eine Liste
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.05.2011, 17:46
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

Da brauchst du einfach nur javascript und tauschst die werte einfach nur aus.
Mit Zitat antworten
  #4 (permalink)  
Alt 25.05.2011, 17:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.05.2011
Beiträge: 4
gabbasnake befindet sich auf einem aufstrebenden Ast
Standard

und wie würde das java script aussehen?
Mit Zitat antworten
  #5 (permalink)  
Alt 25.05.2011, 18:09
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 25.05.2011, 22:58
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

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

gruß,
take
Mit Zitat antworten
  #7 (permalink)  
Alt 26.05.2011, 10:01
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von take_a_7 Beitrag anzeigen
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
Mit Zitat antworten
  #8 (permalink)  
Alt 26.05.2011, 13:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.08.2005
Beiträge: 134
manya befindet sich auf einem aufstrebenden Ast
Standard :target

Zitat:
Zitat von take_a_7 Beitrag anzeigen
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

Geändert von manya (26.05.2011 um 13:48 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 31.05.2011, 12:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.05.2011
Beiträge: 4
gabbasnake befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.05.2011, 13:16
Benutzerbild von Chris2011
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 04.01.2011
Beiträge: 301
Chris2011 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von gabbasnake Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
hilfe java css html div

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
header verrutscht... weblearner CSS 6 03.12.2008 20:34
Problem mit umwandlung px zu em/pt - Verständnis Problem Muckel CSS 27 26.05.2008 07:38
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 14:12


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:38 Uhr.