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

Jquery Slider als Menü - Nur Contentbereich soll aktualisiert werden

A

attaxx

Neues Mitglied
Guten Tag liebe Gemeinde,

ich habe folgendes Problem:

Wir Ihr auf meiner Seite sehen könnt habe ich einen Imageslider mit einer kleinen Navigationsleiste. Nun möchte ich erreichen das wenn ich z.B auf das zweite Bild klicke sich auch der Content Bereich darunter ändert. Das heist, der Imageslider soll später als Menü dienen...heist also: Bild 1 -> Content 1...Bild 2 Content 2 usw...Ich möchte aber nicht die ganze Seite reloaden sondern nur der Content Bereich darunter.

Hier mal die Seite: http://stuggi-card.de/index.html

Ich habe es schon mit dem onclick Händler und Ajax Versucht der sich dann aus einer php Datei den text holt. Das hat soweit auch funktioniert, nur das ich das nur einmal machen konnte da die Bilder keine ID oder ähnliches hatten und ich den text nicht wirklich formatieren konnte dann.

Komme gerade einfach nicht weiter....vllt hat ja jmd von euch eine Idee?

Hier mal der Code.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
    <title>CSS - die kompakte Einführung</title> 
    <link href="layout.css" type="text/css" rel="stylesheet" media="all"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    
</head>
 
<body>


<div>


<div id="header">
        <div id="gallery">
            <div id="slides">
    
                <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
                <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
                <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>
                <div class="slide"><a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>
      
            </div>
    
        <div id="menu">
            <ul>
                <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
            </ul>    
        </div>  
        </div>
</div> 


    
    <div id="main">
        <div id="content">
            <p>
            Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs Test des Bereichs 
            </p>
            
            
            
            </div>
        
        
    </div>
    <div id="bottom">Fußzeile</div>
</div>    
</body>
</html>
 
Deine Bilder bzw. eher die Links brauchen aber eindeutige IDs mit denen das Script erkennen kann, welche Texte eigentlich angezeigt werden sollen. Wie sieht denn dein Versuch damit aus? Kann man momentan ja nicht sehen? Das war aber zumindest schon der richtige Weg.
 
Mein versuch sah so aus wieder hier auf der Seite

Ajax Beispiel 001

Das Problem hier bei war das ich diesen javascript:setRequest() zwar allen mitgeben konnte, aber wie unterscheidet der nun welchen text er z.B ausgeben soll
 
Z.B. so

HTML: 
<a href="aufzurufendedatei.html" onclick="setRequest(this.href);">klick mich an</a>

Code: 
function setRequest(thisurl) { 
[..]
var url = thisurl;
[..]
return false;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben