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>

如果您在选定的 li 上看到“标签选择”，我希望根据代码中点击的链接更改此内容，如下所示： “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');        
    });
});

就是这样:)）

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

1 个答案: