Php 单击选项卡内容内的链接，在jQueryUI-tabs中动态加载ajax内容

我有一个基本的jQueryUI选项卡，默认情况下加载ajax内容

举例如下：

<script>
$(function() {
    $( "#tabs" ).tabs();
});
</script>

<div id="tabs">
<ul>
<li><a href="http://localhost/demotabs/users/list">List Users</a></li>
<li><a href="http://localhost/demotabs/jobs/list">List Jobs</a></li>
</ul>
<div id="tabs-1">
... ajax contents of user's list comes here....
plus a link <a href="http://localhost/demotabs/users/add">add new user</a>
</div>
<div id="tabs-2">
... ajax contents of jobs's list comes here....
plus a link <a href="http://localhost/demotabs/jobs/add">add new job</a>
</div>
</div>

$（函数（）{
$（“#制表符”）.tabs（）；
});




... 用户列表中的ajax内容出现在这里。。。。
加上一个链接
... 这里是作业列表中的ajax内容。。。。
加上一个链接

我想要实现的是，当我单击AddNewUser链接时，清除Tab1内容并 显示通过ajax加载的添加用户表单的内容，保持选项卡1处于选中状态

同样，如果单击“添加新作业”，则显示并清除选项卡2中的初始作业列表内容，并显示通过ajax加载的添加作业表单的内容，同时保持选项卡2处于选中状态

我不知道如何才能做到这一点，请引导我在正确的方向上解决这个难题

谢谢….

使用函数

---

你可以这样做。将类设置为link并为该链接创建onClick事件。在html参数中指定要在ajaxurl中调用的url

<script>
    $(function(){
         $(".tab_list).click(function(){
          var url=$(this).attr("param");
          $.ajax{
              // ....
          url: "http://yourdomain.com/path/to/file/url
              // ....
          }
       });
    })
 </script>
 <ul>
    <li><a href="http://localhost/demotabs/users/list" class="tab_list" param="users">List Users</a></li>
     <li><a href="http://localhost/demotabs/jobs/list" class="tab_list" param="jobs">List Jobs</a></li>
  </ul>

$（函数（）{
$（“.tab_列表）。单击（函数（）{
var url=$（this.attr（“param”）；
$.ajax{
// ....
url:“http://yourdomain.com/path/to/file/url
// ....
}
});
})

---

希望这能有所帮助。

在要显示的静态文本之后的tab1中创建一个div标记。在脚本中，通过使用div标记的id，可以动态显示tab1中的元素。您也可以使用span来代替div，您能试试这个吗

    <div id="tabs-1">
    ... ajax contents of user's list comes here....
    plus a link <a href="users/add" onclick="return LoadData(this,'1')">add new user</a>
    </div>
    <div id="tabs-2">
    ... ajax contents of jobs's list comes here....
    plus a link <a href="jobs/add" onclick="return LoadData(this, '2')">add new job</a>
    </div>


     <script>
      $(function() {
        $( "#tabs" ).tabs();
     });

      function LoadData(ths, d){ 
            var baseUrlpath ='Your base url here';
             var url = baseUrlpath + $(ths).attr('href'); 
             console.log(url); 
             $( "#tabs-"+d ).load(url, function() {
                 console.log( "Load was performed." );
             });

             return false;
      }
    </script>

... 用户列表中的ajax内容出现在这里。。。。
加上一个链接
... 这里是作业列表中的ajax内容。。。。
加上一个链接
$（函数（）{
$（“#制表符”）.tabs（）；
});
函数加载数据（ths，d）{
var baseUrlpath='Your base url here'；
var url=baseUrlpath+$（ths.attr（'href'）；
console.log（url）；
$（“#制表符-”+d）.load（url，函数（）{
日志（“加载已执行”）；
});
返回false；
}

我正在编写您的解决方案，对其进行了一些修改，但什么也没发生。我可以在函数LoadData（ths，d）中正确获取ths和d值，但是$（“#tabs-”+d）.load（$（ths）.attr（'href'），function（）不起作用…无法获取日志…您的更改是什么？您可以发布您所做的更改吗？函数LoadData（ths，d）{var url=baseUrlpath+$（ths）.attr（'href'）；console.log（url）$（“#tabs-”+d）.load（url，function（）{console.log（“load was performed”）；}）；return false；}

baseUrlpath

缺失。因此，您需要在

var-url

之前添加它作为

var-baseUrlpath='your-base-path value'；

，以正确获取var-url的值。$（“#tabs-“+d）.load（url，function（））似乎不工作..我重复url是正确的，并提醒确定。。。

    <div id="tabs-1">
    ... ajax contents of user's list comes here....
    plus a link <a href="users/add" onclick="return LoadData(this,'1')">add new user</a>
    </div>
    <div id="tabs-2">
    ... ajax contents of jobs's list comes here....
    plus a link <a href="jobs/add" onclick="return LoadData(this, '2')">add new job</a>
    </div>


     <script>
      $(function() {
        $( "#tabs" ).tabs();
     });

      function LoadData(ths, d){ 
            var baseUrlpath ='Your base url here';
             var url = baseUrlpath + $(ths).attr('href'); 
             console.log(url); 
             $( "#tabs-"+d ).load(url, function() {
                 console.log( "Load was performed." );
             });

             return false;
      }
    </script>