Как загрузить фрагмент страницы с помощью jQuery?

Question

У меня есть три страницы

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

Все страницы имеют одинаковые Раздел дел там есть страницы. Пожалуйста, смотрите ниже общего Дивизион Раздел на всех страницах, однако текст будет отличаться для каждой страницы.

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

Сейчас на показатель страница, которую я получил Ссылки Для двух других страниц (Школы.aspx и Классы.aspx), когда пользователь нажмет на эти ссылки, он будет отображаться выше в разделе на основе Div ID = "Tab-Containter" взяты с этих страниц и покажут в Раздел дел на странице указателя ниже.

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

Пожалуйста, предложите, как я могу достичь этой функции, используя Ajax и jQuery. (Было бы хорошо иметь решение с использованием AJAX)

Спасибо!

Обновлять:

Все вышеперечисленные ссылки (школы, классы и т. Д.) Поступают ниже 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>

Если вы видите, есть класс «Выбранные вкладки» на выбранном лита, Я хочу, чтобы это было изменено в соответствии со ссылкой, щелкнутой в коде, как предложено «Марко Ивановски»

Спасибо еще раз!

Answer 1

С использованием jQuery Load () Вы можете легко загружать фрагменты страницы.

Обновлять
Давайте установим класс (вы можете изменить его на любую) для каждой ссылки, которую мы хотим загрузить через AJAX. Это хороший подход, потому что пользователи без JavaScript просто перейдут на страницы.

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

Вот и все :)