javascript - Jquery ajax 在重新加载之前清除

Question

我知道这是一个在这里讨论过很多次的话题，但是该站点的解决方案都没有帮助我....

我有两个导航项，它们都使用 jquery ajax 加载两个不同的 PHP 文件。我正在使用 jquery 手机。 我的问题是，每当我单击另一个导航项时，另一个导航项不会自行清除，所以基本上我会在 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 class 名称。然后我将使用 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

更新:参见 DEMO 使用 jQuery 移动版。