Come faccio a caricare un frammento di pagina utilizzando jQuery?

Question

Ho tre pagine

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

Tutte le pagine Ha gli stessi div sezione in là pagine. Si prega di vedere sotto la comune DIV in tutte le pagine, ma il testo sarà diverso per ogni pagina.

<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>

Ora sul index Io ho link per le altre due pagine ( Scuole aspx e Classi . aspx), quando l'utente cliccherà su questi link mostrerà precedente paragrafo sulla base di div id = "scheda-contenitore" preso da quelle pagine e mostrerà in un div sezione della pagina indice sottostante.

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

Si prega di suggerire come posso ottenere questa funzionalità utilizzando AJAX e jQuery. (Sarebbe bene avere soluzione utilizzando AJAX)

Grazie!

Aggiornamento:

Tutti i link di cui sopra (scuole, classi, ecc) sono provenienti dal basso codice html

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>

Se si vede c'è una classe "schede-selezionato" sulla selezionato li , voglio che questo sia modificata in base al link cliccato nel codice come suggerito da "Marko Ivanovski"

Grazie ancora!

Answer 1

Utilizzo jQuery carico () si può facilmente caricare frammenti di pagina.

Aggiorna
insieme di Let una classe (è possibile modificare questo per qualunque cosa) per ogni link che vogliamo carico tramite la tecnologia AJAX. Questo è un approccio buono perché gli utenti senza JavaScript sarà solo accedere alle pagine.

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');        
    });
});

Questo è tutto:)