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

Divs mittels Ajax befüllen

Devel0per

Devel0per

Neues Mitglied
Hallo

ich kenne mich eigentlich gar nicht mit Ajax aus.

Nun hab ich folgendes Problem, ich möchte einen Div mit Text befüllen ohne die Seite neu laden zu müssen, also eben Ajax.

Ich will jedoch nur index.html und möchte die Divs auf der Seite haben, sodass sie eben da sind aber nicht angezeigt werden und nur auf Auffruf 1er von diesen sichtbar wird also eben ein variabler div der mit den divs auf der seite befüllt wird. Ganz wichtig eben keine anderen Dateinen die extra hineingeladen werden.
Code: 
<html>
<head>
   
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
            $(document).ready(function() {

                $("#a.id").click(function() {
                    $("#content").load("div+id")
                });               
            });




</script>
        <link rel="stylesheet" type="text/css" href="style.css">
<body >
    <section>
        <a id="1" href="#content1">Content1</a>
        <a id="2" href="#content2">Content2</a>
        <a id="3" href="#content3">Content3</a>
            <!-- ...usw --->
    </section>
<div id=content">
<!-- Inhalt soll hier zugewiesen werden -->

</div>
    <div id="div-1">
        div1
    </div>
    <div id="div-2">
        div2
    </div>
    <div id="div-3">
        div3
    </div>
    <!-- ...usw --->
</body>
</html>

An soetwas habe ich gedacht, dass immer die id des angeklickten Links (a) genommen wird und dann eben die Zahl übertragen wird und damit dann der entsprechende Div in den Sichbaren Berreich (div content) kommt.

Nun ich bin damit blutiger Anfänger und hab keine Ahnung mit Variablen und Ajax, ein bisschen Javascript kann ich...

Ich hoffe , dass Ihr mir weiterhelfen könnt.

Aber vielleicht steht ich einfach nur auf dem Schlauch oder meine Therorie ist total daneben.

Danke schon mal!
 
Hallo,

AJAX wäre für deine Anforderung der falsche Weg.
AJAX wird verwendet, um Daten vom Server zu laden.

Da hier der Content bereits in der index.html vorhanden ist, sind alle Daten da.

Was du eher suchst, ist per JavaScript CSS Regeln zu ändern.
Wenn man auf einen Link klickt, wird das gerade angezeigte DIV ausgeblendet und ein anderes DIV eingeblendet.

Es gibt bestimmt noch andere Möglichkeiten, aber das wäre eine machbare.
JQuery wäre hier dein Freund

Gruß

Ironzwerg
 
ok danke schon mal :D

nun ist das hier mit jquery gemacht? denn so will ich das auch haben

Code: 
<html>
<body>
<div id="bannernavi">
<a id="navilink1" href="#content1">SHOOTINGS</a>
<a id="navilink2" href="#content2">BEWERBUNGSPHOTOS</a>
<a id="navilink3" href="#content3">PARTIES</a>
<a id="navilink4" href="#content4">MAKROS</a>
<a id="navilink5" href="#content5">DIVERSES</a>
<a id="navilink6" href="#content6">KONTAKT</a>
</div>
<!-- Menu -->

<div id="content">

<div id="content1">
content 1
</div>

<div id="content2">
content 2
</div>

<div id="content3">
content 3
</div>
<!-- ... usw-->


</div>
</body>
</html>


Also, dass eben in dem Div "content" auf Klick z.B. div "content3" angezeigt wird. Das wäre dann jquery ?

PS: muss es dann index.html oder index.php sein ?
 
Zuletzt bearbeitet:
Das ist erstmal nur reines HTML.
JQuery ist eine JavaScript Bibliothek, mit einem viel Schreibarbeit abnimmt.
Man kann auch alles mit JavaScript machen, aber JQuery macht schon Sinn.

Des Weiteren brauchst du CSS, um die einzelnen DIVs ein- und ausblenden zu können.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben