• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV Inhalt mit Javascript ändern

tsting

tsting

Neues Mitglied
Liebe Community,
ich bin gerade dabei eine einfache Homepage zu gestalten. Dabei will ich den Inhalt von einem Div Container über die Links in der Sidebar ändern (externe html Dateien). Aber irgendwie funktioniert es nicht. Ich wäre euch unendlich dankbar, wenn ihr mir helfen könntet diesen Fehler zu beheben, bin schon sehr am verzweifeln.


<body>

<div id="aussen" style=" width:1100px; margin-left:auto; margin-right:auto">
<div id="header" style="position: relative; left: 6px; top: 12px; width: 1100px; height: 210px; z-index: 8">
<img alt="hgbild1" height="210" src="images/hgbild10.jpg" width="1100" /></div>
<div id="logolink" style="position: relative; left: 7px; top: -43px; width: 120px; height: 151px; z-index: 9">
<a href="index.html">
<img alt="logo" height="151" src="images/logo2.png" width="120" class="auto-style1" /></a></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<!-- HAUPTMENÜ -->

<ul id="menu">
<li id="aktuell" style="left: 154px; top: -358px; z-index: 7; " class="auto-style4"><a href="aktuell.html">Aktuell</a></li>
<li id="wir" style="left: 185px; top: -358px; z-index: 6;"><a href="wir.html">
<strong>Wir</strong></a>
<ul>
<li><a href="#">Der Vorstand</a></li>
<li><a href="#">Mitwirkende</a></li>
<li><a href="#">Die Regisseure</a></li>
</ul>
</li>
<li id="produktionen" style="left: 225px; top: -358px; z-index: 5;"><a href="produktionen.html">Produktionen</a>
<ul>
<li><a href="#">Burg Reichenstein</a></li>
<li><a href="#">Kulturtreffbad</a></li>
</ul>
</li>
<li id="multimedia" style="left: 253px; top: -358px; z-index: 4;"><a href="multimedia.html">Multimedia</a></li>
<li id="jugend" style="left: 291px; top: -358px; height: 27px; z-index: 3;"><a href="jugend.html">Jugend</a>
<ul>
<li><a href="#">Die kleine Hexe</a></li>
<li><a href="#">Der Zauberer von OZ</a></li>
</ul>
</li>

</ul>

<div id="linie" style="position: relative; left: 152px; top: -356px; width: 950px; height: 11px; z-index: 2">
<img alt="linie" height="8" src="images/linie.png" style="float: left" width="956" /></div>


<!-- SIDEBAR LINKS -->
<div id="main">
<nav id="sidebar" style="position: relative; left: 10px; top: -311px; width: 154px; height: 303px; z-index: 10" class="auto-style3">
<ul class="fn-nav">
<li id="dervorstand" style="left: 0px; top: 0px; z-index: 6; width:154px"><a data-site="dervorstand" href="#">Der Vorstand</a></li>
<li id="mitwirkende" style="left: 0px; top: 5px; z-index: 5; width:154px"><a data-site="mitwirkende" href="#">Mitwirkende</a></li>
<li id="dieregisseure" style="left: 0px; top: 10px; z-index: 5; width:154px"><a data-site="regisseure" href="#">Die Regisseure</a></li>
</ul>
</nav>

<div id="content" style="background-color:#CCCCCC; left:174px; top:-612px; width: 927px; z-index: 1; height: 252px; position: relative;">
<!-- Hier wird später der Inhalt stehen -->
</div>
</div>
<!-- Hier kommt JavaScript hin. -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content").load("wirstart.html");
$('.fn-nav a').click(function(e){
e.preventDefault();
var site = $(this).data('site');
site = site + '.html';
$(".content").load(site);
});
});
</script>

<p>&nbsp;</p>
</div>
</body>
 
bitte entschuldigt den langen Code, ich bin noch sehr unsicher was Javascript betrifft und weiß nicht wo der Fehler überall liegen könnte :(
 
Ist die Seite irgend wo online? Dann poste doch mal die URL, damit man es in Aktion testen kann. Wegen der Unterseiten wäre es ein bisschen umständlich, eine Testumgebung aufzubauen.
 
Zuletzt bearbeitet von einem Moderator:
Im HTML gibst Du dem Element die ID content: <div id="content"
aber im jQuery sprichst Du es mit $(".content") an.
Richtig wäre: $("#content")
 
Die Seite ist noch nicht online, hab die Zugangsdaten zum Server noch nicht bekommen.

Sempervivum schrieb:
Im HTML gibst Du dem Element die ID content: <div id="content"
aber im jQuery sprichst Du es mit $(".content") an.
Richtig wäre: $("#content")
Zum Vergrößern anklicken....
Hab ich probiert, es ist aber unverändert. Es kommt keine Fehlermeldung, die Seite öffnet sich, aber wenn ich den Link anklicke, dann ändert sich der DIV Content einfach nicht..
 
Verstehe ich nicht. Ich hatte eine Testseite mit deinem Code angelegt und es funktioniert, nachdem ich den Fehler korrigiert habe. (Exemplarisch mit den Links unter "<!-- SIDEBAR LINKS -->".) Stimmt die Adressierung der Unterseiten? Sie müssen im selben Verzeichnis wie die Hauptseite liegen.
Lade die Seiten doch mal bei einem Freehoster wie bplaced.net hoch.
 
Ich trau mich das eigentlich gar nicht zu schreiben, aber falls jemand sonst noch das selbe Problem hatte. Die Seite funktioniert, danke Sempervivum für den Tipp. Ich hatte die Datei im falschen Ordner gespeichert und das einfach nicht gemerkt. :oops::oops::oops: Shame on me
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben