Jquery Аякса ясно еще до перезагрузки

Question

Я знаю, что это тема обсуждается здесь много раз, но ни один из раствора сайта не помог мне ....

У меня два навигационных элементов и оба из них нагрузки два разных файла PHP, используя jquery ajax. Я использую jquery mobile. Моя проблема в том, что всякий раз, когда я нажимаю на другой элемент навигации, другой не очищается, поэтому в основном я получаю div поверх div. Я пробовал .html("");, но пока не работал для меня.

HTML:

<div id="tabs"> 
     <ul> 
      <li><a class="classloader1">Upcoming</a></li> 
      <li><a class="classloader2">History</a></li> 
     </ul> 
</div> 

<div id="content"></div> 

JS:

$(".classloader1").click(function(){ 
    $("#content").load("get.php"); 
}) 
    $(".classloader2").click(function(){ 
    $("#content").load("history.php"); 
}) 

Answer 1

Я хотел бы попробовать другую вкладку структуру как

<div id="tabs"> 
    <ul> 
     <li><a class="classloader one">Upcoming</a></li> 
     <li><a class="classloader two">History</a></li> 
    </ul> 
</div> 

, где оба элемента разделяют classloaderкласс имя. Тогда я хотел бы использовать JQuery .html() для загрузки содержимого, но возвращая конкретный файл в зависимости от вкладки щелкнул как:

$(".classloader").on("click", function (event) { 
    var file = $(event.target).hasClass("one") ? "get.php" : "history.php"; 
    $("#content").html(function() { 
     return $(this).load(file); 
    }); 
}); 

Если у вас есть более чем две вкладки, вы могли бы использовать switch заявление, чтобы установить значение file вар.

См DEMO

UPDATE: см DEMO с помощью JQuery мобильного телефона.