Question

我知道这是多次讨论的话题，但网站的解决方案都没有帮助我....

我有两个导航项，他们都使用jquery ajax加载两个不同的PHP文件。我正在使用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

更新：使用jQuery mobile查看 DEMO 。

重新加载之前Jquery ajax清除

1 个答案: