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

jQuery: Dynamische Inhalte anzeigen

A

AndreMUC

Neues Mitglied
Ich bins mal wieder ....

Ich versuche nun per jQuery dynamische Inhalte anzeigen zu lassen.
Die Inhalte sollen in der "section: textbereich" angezeigt werden. Ich habe mir dafür ein Video Tutorial bei Youtube gesucht.


Leider funktioniert das nicht so wie es im Video gezeigt wird.

Mein Code folgt:
PHP: 
<!DOCTYPE html>
<html>
    <head>
    <title>Test Website</title>
        <meta charset="UTF-8" />
        <meta name="description" content="Kurzbeschreibung" />
            <link href="css/style.css" type="text/css" rel="stylesheet" />
            <link href="css/textstyle.css" type="text/css" rel="stylesheet" />
            <link href="css/picstyle.css" type="text/css" rel="stylesheet" />
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
            <script type="text/javascript">
            &(document).ready(function()    {
                    $("#m_home").click(function()    {
                        $("textbereich").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
                            $("#textbereich").load("index.php", function()  {
                                $("#textbereich").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400};
                            });
                        });
                    });
                    $("#m_kontakt").click(function()    {
                        $("#textbereich").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
                            $("#textbereich").load("kontakt.html", function()  {
                                $("#textbereich").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400};
                             
                            });
                        });
                    });
                });
        </script>
</head>
<body>
<div id="wrapper">
<header>
    <img class="banner" src="image/banner_1.png" alt="xPhone Repair Finsing">

<!-- <?php   include 'header.php';   ?></header> <!-- Ende Header DIV -->
<div id="main">
<div id="links">
<div id="linkbox_1">
    <section id="menue">
    <ul>
        <p class="menu">Index:
        <p class="untermenu"><li><a href="#!/index.php" id="m_home">Home</a>
        <p class="untermenu"><li><a href="#!/kontakt.html" id="m_kontakt">Kontakt</a>
        <p class="untermenu"><li><a href="#!/anfahrt.html" id="m_anfahrt">Anfahrt</a>
        <p class="untermenu"><li><a href="#!/impressum.html" id="m_impressum">Impressum</a>
    </ul>
    </section>
</div>
<div id="linkbox_2">
    <section id="menue">
    <ul> 
        <p class="menu">Preisliste
        <p class="untermenu"><li><a href="iphone.html">iPhone</a>
        <p class="untermenu"><li><a href="ipad.html">iPad</a>
        <p class="untermenu"><li><a href="shop.html">Zubehör</a>
    </ul>
    </section>
</div>
<div id="linkbox_3">
        <p class="openning"><h6>Öffnungszeiten
        <p class="openning">Mo - Fr
        <p class="openning">17:00 - 22:00 Uhr
        <p class="openning">Sa + So + Feiertag
        <p class="openning">... nach Vereinbarung!</h6>
</div>
<div id="socialbox">social</div></div> <!-- Ende links DIV -->
<section id="textbereich">
    <h1>textbereich</h1>
    <p>Zeile 1
    <p>Zeile 2
    <p>Zeile 3
</section>
<div id="sidebar">
<p><a href="http://www.handyreparaturvergleich.de/werkstatt-reparatur-handydoctor-markt-schwaben.html#regional-markt-schwaben" target="_blank"><img class="logo_handyreparatur" src="http://www.handyreparaturvergleich.de/images/smartphone-iphone-reparatur/partner-werkstatt/eingetragene-smartphone-werkstatt.png" width="161" /></a>
<p><img class="sterne" src="image/sterne.png" alt="Bewertungen auf Handywerkstatt.de iPhone Diplay Akku Backcover Reparatur">
<p><img class="einzelteile" src="image/iphone4-einzelteile.jpg" alt="iPhone Einzelteile Display Backcover Akku Touch">
<p><img class="einzelteile" src="image/iphone4s-einzelteile.jpg" alt="iPhone Einzelteile Display Backcover Akku Touch">
<p><img class="einzelteile" src="image/iphone5-einzelteile.jpg" alt="iPhone Einzelteile Display Backcover Akku Touch">
<p><div id="zaehler"><a id="5207664" height="50px" width="140px" href="http://www.besucherzaehler-counter.de">Homepage Besucherzähler</a><script language="JavaScript" type="text/javascript" src="http://www.besucherzaehler-counter.de/jnsdjfndf.php?234234=5207664&676876=33"></script></div>
</div>
</div> <!-- Ende Main Bereich -->
<div id="flt-clear"></div>
<div id="picture">
<p><img class="bildhome" src="image/iphone4-display-reparatur.jpg" alt="iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 5c" />
<img class="bildhome" src="image/iphone-display-defekt.jpg" title="iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 5c" alt="iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 5c" />
<img class="bildhome" src="image/iPhone4sdefekt.jpg" title="iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 5c" alt="iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 5c" />
   </div>
<footer>
    <address>
         <p class="anschrift">&copy; 2014 - Andre Schulz - Eichenstrasse 24 - 85464 Eicherloh - Tel.: 08123 99 19 838 - Mobil: 0177 198 96 95
         <p class="anschrift">Apple, iPhone, iPad sind eigetragene Markenzeichen und werden zur Darstellung der hier angebotenen Dienstleistungen verwendet. <p class="anschrift">Die Rechte sind allein Apple vorbehalten!
    </address>
        <a class="footerlink" href="impressum.html" >Impressum</a>
        <a class="footerlink" href="agb.html">AGB</a>
        <a class="footerlink" href="mailto:[email protected]">Kontakt</a>
<!-- <?php  include 'footer.php';   ?> -->
</footer>
</div>
</body>
</html>

CSS Code:
Code: 
* {
  padding: 0;
  margin: 0;
}
body  {
    background-image: -moz-linear-gradient(top left, white 25%, grey 75%);
    background-image: -webkit-linear-gradient(top left, white 25%, grey 75%);
    background-image: -ms-linear-gradient(top left, white 25%, grey 75%);
    background-image: -o-linear-gradient(top left, white 25%, grey 75%);
    background-size: 100.5% auto;
    background-attachment: fixed;
}
#wrapper {
   width: 960px;
   margin-top: 10px;
   margin-right: auto;
   margin-bottom: 10px;
   margin-left: auto;
}
header {
 
 
 
}
#links  {
    height: 700px;
    width: 150px;
    border: 1px solid black;
    margin-top: 10px;
    float: left;
}
#linkbox_1  {
    width: 100px;
    border: 1px solid black;
    margin-top: 15px;
    margin-left: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#linkbox_2  {
    width: 100px;
    border: 1px solid black;
    margin-top: 15px;
    margin-left: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#linkbox_3  {
    width: 120px;
    border: 1px solid black;
    margin-top: 15px;
    margin-left: 5px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    text-align: middle;
}
.menu   {
    margin-left: 7px;
}
#menue li  {
    margin-left: 20px;
}
.untermenu  {
    margin-left: 10px;
}
#socialbox  {
    height: 150px;
    width: 100px;
    border: 1px solid black;
    margin-top: 15px;
    margin-left: 24px;
}
#textbereich  {
    height: 700px;
    width: 630px;
    border: 1px solid black;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}
#sidebar  {
    height: 700px;
    width: 150px;
    /* border: 1px solid black; */
    margin-top: 10px;
    float: right;
}
#flt-clear  {
    clear: both;
}
#picture  {
    height: 150px;
    width: 634px;
    margin-top: 15px;
    padding-left: 7px;
    padding-right: 2px;
    margin: 0px auto;
}
#zaehler    {
    /* border: 1px solid black; */
    padding-left: 9px;
}
#footer     {
 
}
 
Werbung:
Keinen Bock.

Oder denkst du, jemand hier hätte Lust, sich ein 15minütiges Videotutorial anzuschauen, um in einem Code nach Abweichungen zu suchen?
 
Werbung:
Tronjer schrieb:
Keinen Bock.

Oder denkst du, jemand hier hätte Lust, sich ein 15minütiges Videotutorial anzuschauen, um in einem Code nach Abweichungen zu suchen?
Zum Vergrößern anklicken....

Weisst du, es hat keiner gesagt das du dir das Video anschauen sollst.
Man kann es auch frundlicher sagen und nicht so eine Tonart anschneiden wie du.
 
Werbung:
Hallo, ich hab es soweit hinbekommen.
Jetzt versuche ich schon seit einiger Zeit daran, Inhalte per Bildklick im selben DIV Container anzeigen zu lassen.

Wer auf www.ireplace.de auf iPhone klickt, bekommt eine Übersicht der Geräte Generationen.
Wenn man zb. auf iPhone 4/4s klick soll die Preisliste im gleichen DIV Container aufgehen. Der Rest der Seite soll so bleiben wie es ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben