1

我有三页

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>

现在在索引页面上，我有其他两个页面（Schools .aspx 和Classes .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>

如果您看到选定的li上有一个类“tabs-selected”，我希望根据“Marko Ivanovski”建议的代码中单击的链接来更改它

再次感谢！

4

1 回答 1

6

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

而已 ：）

于 2010-10-11T07:15:47.353 回答