Wie lade ich eine Seite Fragment mit jQuery?

Question

Ich habe drei Seiten

1) index.aspx
2) schools.aspx
3) Classes.aspx

Alle Seiten haben gleichen div Abschnitt in dort Seiten. Bitte beachten Sie unter dem gemeinsamen DIV auf allen Seiten, aber Text wird für jede Seite unterschiedlich sein.

<div id="tab-container" class="tabs-container">
    <div class="contentContainer">
        <img width="275" height="220" title="" alt="" src="/99/english/images/fpoSquare.jpg" class="imgRight"></img>
        <p class="destinationSectionHeader first">About Sydney</p><p>Learn English at a Kaplan International Colleges English school! We offer a variety of English courses at over 40 English schools in some of the world's most desirable locations in the UK, Ireland, Australia, New Zealand, USA, Canada and Malta.From fashionable city centre schools to schools on the campuses of prestigious universities, you can take an English course at a Kaplan International Colleges school in the environment that best suits you. All of our English schools provide our students with easy access to great resources and the local area's best cultural, social and historic attractions.
Study in the world-famous Empire State Building in New York, in a beautiful 7-storey art deco building next to the famous Cathedral Square in Christchurch, on Santa Barbara City College's impressive campus, in a historic building in London or in the heart of Sydney. You can have a look at all our schools and English courses by browsing through our website - so take your time and choose the English school that's right for you.</p>
    </div>
</div>

Jetzt auf Index Ich habe haben Links für weitere zwei Seiten ( Schulen aspx und Klassen . aspx), wenn der Benutzer auf diese Links klicken, wird es oben im Abschnitt basierend auf div id zeigen = "Tab-Container" von diesen Seiten genommen und zeigt in einem div Abschnitt der Index-Seite unten.

<div id="contents"></div>

Bitte legen nahe, wie kann ich diese Funktionalität erreichen mit AJAX und JQuery. (Es wäre gut, hat Lösung mit AJAX)

Danke!

Update:

Alle oben genannten Links (Schulen, Klassen usw.) kommen von unten HTML-Code

ul class="tabHead tabs-nav">
    <li class="tabLeftEnd"></li>
    <li class="tabs-selected" id="tab-1">
    <a class="load-fragment" href="/index.aspx"><span>Overview</span></a></li>
    <li id="tab-2">
    <a class="load-fragment" href="/schools.aspx"><span>Guide</span></a></li>
    <li id="tab-3">
    <a class="load-fragment" href="/classes.aspx"><span>Flight Schedule</span></a></li>
    <li id="tab-4">
    <a class="load-fragment" href="/specialOffers.aspx"><span>Special Offers</span></a></li>
    <li id="tab-5">
    <a class="load-fragment" href="/photo.aspx"><span>Photos</span></a></li>
    <li class="tabRightEnd"></li>
</ul>

Wenn Sie sehen, gibt es eine Klasse "tabs-selected" auf ausgewählte li , ich möchte dies den Link in dem Code geklickt entsprechend geändert werden, wie vorgeschlagen durch "Marko Ivanovski"

Danke nochmal!

Answer 1

Mit jQuery load () leicht Seite Fragmente laden können.

Aktualisieren
Lassen Sie uns Satz eine Klasse (Sie können dies, was auch immer aus) für jeden Link, dass wir auf Last über Ajax wollen. Dies ist ein guter Ansatz, weil die Benutzer ohne Javascript wird nur navigieren Sie zu den Seiten.

HTML

<a href="Schools.aspx" class="load-fragment">Schools</a>
<a href="Classes.aspx" class="load-fragment">Classes</a>

jQuery

$(".load-fragment").click(function(e) {
    // Stop the browser from going to the page
    e.preventDefault();

    // add tabs-selected class for the selected item
    $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
    $(this).parent().addClass("tabs-selected");

    // store the href in a variable
    var href = $(this).attr('href'); // this is the clicked link's href attribute

    // load the data
    $("#contents").load(href + " #tab-container", function() {
        // perform some action when the content is loaded
        $(this).fadeIn('slow');

        // unsure if $(this) works with .load(), use the line below if it doesn't
        $("#contents").fadeIn('slow');        
    });
});

Das ist es:)