jQuery ui选项卡仅在单击选项卡时才加载选项卡内容

Question

I am using jquery ui tab i want to load tab content only when tab is clicked. 我正在使用jQuery ui选项卡，我只想在单击选项卡时才加载选项卡内容。 tab content is getting dyanamically through ajax 选项卡的内容正在通过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 tab jQuery UI选项卡

I have done this using jquery tab show and based on you need you can also try beforeLoad , load 我已经使用jquery选项卡显示完成了此操作，根据您的需要，您还可以尝试beforeLoad ， load

DEMO DEMO

html 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 jQuery的

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

                }
            });
        }
});

Answer 2

You can identify the Tabs in PHP by giving random ids. 您可以通过提供随机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 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 个解决方案

解决方案1
1 2014-07-03 06:32:54

解决方案2
0 2014-07-03 06:20:32

jQuery jQuery的

jQuery ui选项卡仅在单击选项卡时才加载选项卡内容

问题描述

2 个解决方案

解决方案1 1 2014-07-03 06:32:54

解决方案2 0 2014-07-03 06:20:32

jQuery jQuery的

解决方案1
1 2014-07-03 06:32:54

解决方案2
0 2014-07-03 06:20:32