Jquery ui选项卡仅在单击选项卡时才加载选项卡内容答案

【问题标题】：Jquery ui tabs load tab content only when tab is clickedJquery ui选项卡仅在单击选项卡时才加载选项卡内容
【发布时间】：2014-07-03 06:06:45
【问题描述】：

我正在使用 jquery ui 选项卡我只想在单击选项卡时加载选项卡内容。标签内容通过 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>

【问题讨论】：

嗨，欢迎来到 StackOverflow。您能否提供更多关于您尝试过的内容以及您现有的 Javascript 代码的信息？

标签： jquery html user-interface tabs

【解决方案1】：

jQuery UI 选项卡

我已经使用 jquery tab show 完成了这项工作，根据您的需要，您也可以尝试 beforeLoad,load

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(){

                }
            });
        }
});

【讨论】：

已移除：显示事件jQuery UI 1.10 changelog 使用activate 或beforeActivate

【解决方案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);
            }
        });
    })

【讨论】：