Question

我正在使用jquery ui tab 我想仅在单击选项卡时加载选项卡内容。标签内容通过ajax获得动态

<html>
   <head>
   </head>
   <body>
      <div id="tabs" >
        <ul>
           <li ><a href="#tabs-1" >new tab1</a> </li>
           <li ><a href="#tabs-2" >new tab2</a> </li>
        </ul>
       <div id="tabs-1">
              Tab 1
       </div>
       <div id="tabs-2">
              Tab 2
       </div>
      </div>
   </body>
</html>

Answer 1

jQuery UI标签

我使用jquery标签显示完成了此操作，根据您的需要，您还可以尝试 beforeLoad ，加载

DEMO

<强> HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Foo</a></li>
        <li><a href="#tabs-2">Bar</a></li>
    </ul>
<div id="tabs-1">
   Tab1 
</div>
<div id="tabs-2">
    Tabe2
</div>
</div>

<强> jquery的

 $("#tabs").tabs({
    show: function( e,ui ){
        alert("working");
        $( ui.panel ).html('<p>Load ajax here...</p>');
            $.ajax({
                url:'',
                type:'',
                success:function(){

                }
            });
        }
});

Answer 2

您可以通过提供随机ID来识别PHP中的标签。

<div class="load_content" id="tabs" >
    <ul>
    <li ><a href="#tabs-1" >new tab1</a> </li>
    <li ><a href="#tabs-2" >new tab2</a> </li>
    </ul>

的jQuery

   $(".load_content").click(function () {
        tabId = $(this).attr("id");
        $.ajax({
            type: "POST",
            url: "your/desried/path",
            data: tabId,
            success: function (data) {
                $(this).html(data);
            }
        });
    })

仅当单击选项卡时，Jquery ui选项卡才会加载选项卡内容

2 个答案:

的jQuery