¿Cómo se carga un fragmento de página utilizando jQuery?

Question

Tengo tres páginas

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

Todas las páginas tienen misma div sección en las páginas allí. Vea a continuación el común DIV en todas las páginas, sin embargo, el texto será diferente para cada página.

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

Ahora en index Tengo enlaces para otras dos páginas ( Escuelas .aspx y clases . aspx), cuando el usuario se haga clic en los enlaces que se mostrará por encima de la sección basado en div id = "tab-contenedor" tomado de esas páginas y se mostrará en un div sección de la página de índice a continuación.

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

Para sugerir cómo puedo conseguir esta funcionalidad utilizando AJAX y JQuery. (Sería bueno tener solución usando AJAX)

Gracias!

Actualización:

Todos los enlaces de arriba (escuelas, clases, etc.) están viniendo desde abajo código 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>

Si ve que hay una clase "pestañas seleccionadas-" sobre la selección: li , quiero que esto puede cambiar según el enlace se hace clic en el código como lo sugiere "Marko Ivanovski"

Gracias de nuevo!

Answer 1

Uso carga jQuery () puede cargar fácilmente fragmentos de página.

Actualizar
conjunto Vamos a una clase (que puede cambiar esto a lo que sea) para cada enlace que queremos carga a través de ajax. Este es un enfoque bien porque los usuarios sin Javascript se acaba de navegar a las páginas.

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

Eso es todo:)