HTML內容加載上點擊

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和IM不知道這是最好的辦法

Answer 1

這可以通過僅在目標div不是av的情況下加載內容來工作ailable：

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