Div inhalt per Link ändern

anevay · 08. Sep. 2016

Hi,
ich möchte per Link den Inhalt einer DIV box ändern, habe dies versucht umzusetzen, komme jedoch leider nicht weiter!

HP: www.apenimon.org

Hier mal der code an sich:

HTML:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="layout.css">
<title></title>
</head>
<body>

<script type="text/javascript">
var xmlHttpObject = false;

if (typeof XMLHttpRequest != 'undefined')
{
xmlHttpObject = new XMLHttpRequest();
}
if (!xmlHttpObject)
{
try
{
xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlHttpObject = null;
}
}
}


{
xmlHttpObject.open('get','hallo.txt');
xmlHttpObject.onreadystatechange = handleContent;
xmlHttpObject.send(null);
return false;
}

function handleContent()
{
if (xmlHttpObject.readyState == 4)
{
document.getElementById('main').innerHTML = xmlHttpObject.responseText;
}
}
</script>

<div id="container">

<div id="main">
<h1>Mockup Design 0.1</h1>

</div>

<div id="sidebar">
<div id="button1">
<a data-site="Startseite" href="">Startseite</a>
</div>

<div id="button2">
<a data-site="AIYANA" href="" onclick="loadContent();">AIYANA</a>
</div>

<div id="button3">
<a data-site="ANEVAY" href="">ANEVAY</a>
</div>

<div id="button4">
<a data-site="Partner" href="">Partner</a>
</div>

<div id="button5">
<a data-site="Unternehmen" href="">Unternehmen</a>
</div>

<div id="button6">
<a data-site="Community" href="">Community</a>
</div>

<div id="button7">
<a data-site="Registrieren" href="">Registrieren</a>
</div>

<div id="button8">
<a data-site="Login" href="">Login</a>
</div>

</div>
</div>
<footer><a>Stand:07.09.2016</a></footer>
</body>
</html>

ich bin schier am verzweifeln und hoffe ihr könnt mir weiterhelfen!

Liebe Grüße

Anevay

kkapsner · 08. Sep. 2016

Wo ist denn die Funktion loadContent definiert? Steht etwas in der Fehlerkonsole?

Außerdem ist

anevay schrieb:
komme jedoch leider nicht weiter!

keine besonders gute Fehlerbeschreibung. Wo hängst du denn genau?
PS: Globale Variablen sind keine gute Idee...
PPS: Du solltest außerdem auf jeden Fall dein JS sauber formatieren.

andreax · 09. Sep. 2016

Hallo anyvay

Sollte deine Definition des XMLHttpRequest Objectes Stimmen,
dann ist der Fehler der dass du die Funktion loadContent() zwar aufrufst aber nirgend wo definiert hast.
Sollte es wie oben zu sehen deine feste Absicht sein auch noch den IE 0.1 zu bedienen würde ich dir zum Einsatz eines IFrame raten.
Und hast du bedacht das durch das laden der Inhalte mit XMLHttpRequest oder IFrames google nix mitbekommt.

MFG

paul schmitz · 10. Sep. 2016

Formatiere doch erstmal deinen Code ordentlich.

Code:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="layout.css"/>
		<title>Titel</title>
	</head>
	<body>
		<script>
			var xmlHttpObject = false;
			
			if (typeof XMLHttpRequest != 'undefined'){
				xmlHttpObject = new XMLHttpRequest();
			}
			if (!xmlHttpObject){
				try{
					xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
				}catch(e){
					try{
						xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){
						xmlHttpObject = null;
					}
				}
			}
			
			
			{
				xmlHttpObject.open('get','hallo.txt');
				xmlHttpObject.onreadystatechange = handleContent;
				xmlHttpObject.send(null);
				return false;
			}
			
			function handleContent(){
				if (xmlHttpObject.readyState == 4){
					document.getElementById('main').innerHTML = xmlHttpObject.responseText;
				}
			}
		</script>
		<div id="container">
			<div id="main">
				<h1>Mockup Design 0.1</h1>
			</div>
			<div id="sidebar">
				<div id="button1">
					<a data-site="Startseite" href="">Startseite</a>
				</div>
				<div id="button2">
					<a data-site="AIYANA" nohref onclick="loadContent();">AIYANA</a>
				</div>
				<div id="button3">
					<a data-site="ANEVAY" nohref>ANEVAY</a>
				</div>
				<div id="button4">
					<a data-site="Partner" nohref>Partner</a>
				</div>
				<div id="button5">
					<a data-site="Unternehmen" nohref>Unternehmen</a>
				</div>
				<div id="button6">
					<a data-site="Community" nohref>Community</a>
				</div>
				<div id="button7">
					<a data-site="Registrieren" nohref>Registrieren</a>
				</div>
				<div id="button8">
					<a data-site="Login" nohref>Login</a>
				</div>
			</div>
		</div>
		<footer><a>Stand:07.09.2016</a></footer>
	</body>
</html>

Das hat mich 3 Minuten gekostet und ist viel besser lesbar, besonders das JS.
Warum das doppelte <meta charset="utf-8" />?
Wieso gibt es da ein return false; ohne Funktion darum?
Du solltest außerdem === gegenüber == vorziehen.
Statt href="" solltest du nohref verwenden.
script braucht keinen type und language, wenn es JS-Code enthält.

Jetzt sieht man schon viel besser, dass es keine Funktion loadContent() gibt, die aber auf Knopfdruck aufgerufen wird. Das müsste der Fehler sein.

Div inhalt per Link ändern

anevay

New member

kkapsner

Super Moderator

andreax

Guest

paul schmitz

New member