Question

我有一个包含许多div的页面使用标签：

<div class="tab-box">
    <a href="#companyinfo" class="tabLink activeLink">Company</a> 
    <a href="#contacts" class="tabLink">Contacts</a>
</div>

<div class="tabcontent" id="companyinfo">
content 1
</div>

<div class="tabcontent hide" id="contacts">
content 2
</div>

如何在单击选项卡时仅加载每个div？

我考虑过这样做：

function LoadDivPage(pagename, divname) {
    var page = pagename
    $('#LoadingDiv').show();
    $(divname).load(page, function(){
         //new html exists now 
        $('#LoadingDiv').hide();
    });
    $("html, body").animate({ scrollTop: 0 }, "slow");
}

<a href="#contacts" class="tabLink" onclick="LoadDivPage('http://www.google.co.uk/', '#contacts');">Contacts</a>

但它没有加载google.co.uk，我不确定这是最好的方式

Answer 1

仅当目标div不可用时才加载内容：

$(function(){
    var LoadDivPage = function(pagename, divname) {
        var page = pagename,
            containerClass = 'container-'+divname,
            container = $('<div/>').addClass( containerClass );

        if( $('.'+containerClass).length > 0 ) return;

        $('#LoadingDiv').show();

        $.get(page, function(data){
            container.html(data).appendTo( $(divname) );
            $('#LoadingDiv').hide();
        });
        $("html, body").animate({ scrollTop: 0 }, "slow");
    }

    $('.tabLink').on('click', function(e){
        e.preventDefault();
        var page = $(this).data('page'),
            div = $(this).attr('href');

        LoadDivPage(page, div);
    });
});

http://jsfiddle.net/ag901f8m/2/

Answer 2

这样的事情：

$('.tabLink').on('click', function(e){
    e.preventDefault();
    $('.tabLink').addClass('activeLink').not(this).removeClass('activeLink');
    $('.tabcontent').addClass('hide');

    //Id of current tabcontent
    var currentTab = $(this).attr('href');
    $(currentTab).removeClass('hide');
});

Example

单击时在DIV中加载html内容

2 个答案: