单击选项卡内容内的链接后，在jQuery-UI-选项卡中动态加载ajax内容

Question

我有一个基本的jQuery UI选项卡，默认情况下会加载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>

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

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

我不知道该如何实现，请引导我朝正确的方向解决这个难题...

Thankz .....

Answer 1

你可以做这样的事情。 设置要链接的类，并为该链接创建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>

希望这可以帮助。

Answer 2

使用最接近的函数

// Use "on", when your content loading via ajax
$('#tabs div').on('click', 'a', function()
{
    var container = $(this).closest('div');
    $.post($(this).attr('href'), function(data){
        container.html(data);
    })

    return false;
})

Answer 3

在要显示的静态文本之后，在tab1内创建一个div标签。 通过使用div标签的ID在脚本中，您可以动态显示tab1内的元素。 代替div也可以使用span

Answer 4

你可以试试这个吗

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