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 param中指定要在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

使用closest功能

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

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

4 个答案: