如何使用jQuery加载页面片段？

Question

我有三页

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

所有页面都相同 DIV部分 在那里。请参阅下面的常见 div 在所有页面中的部分，但是每页的文本都不同。

<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-container” 取自这些页面，并将显示 DIV部分 下面的索引页。

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

如果您看到有课 “选项卡选择” 在选定中 李, ，我希望根据“ Marko Ivanovski”建议的代码中单击的链接进行更改。

再次感谢！

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

就是这样 ：）