具有基于 Ajax 的内容的 jQuery UI 选项卡 : how to avoid first panel loaded by AJAX call

Question

假设使用jQuery UI 选项卡并通过 AJAX 调用加载选项卡内容，例如:

<div id="tabbed-menu">
    <ul>
        <li><a href="url1">LINK1</a></li>
        <li><a href="url2">LINK2</a></li>
        <li><a href="url3">LINK3</a></li>
    </ul>
</div>  

使用以下 Javascript 代码:

$(function() {
  $("#tabbed-menu").tabs();
});

现在，在document.ready上，选项卡式菜单已创建，并且第一个选项卡的内容由服务器请求加载。

假设我想替换这个额外的不必要的服务器请求。例如，我可以加载包含第一个选项卡的全部内容的页面。

如何解决这个问题？

Answer 1

您可以在第一个选项卡的 href 属性中提供 ID 选择器而不是 URL。例如:

<div id="tabbed-menu">
    <ul>
        <li><a href="#content1">LINK1</a></li>
        <li><a href="url2">LINK2</a></li>
        <li><a href="url3">LINK3</a></li>
    </ul>
    <div id="content1">
        Content of first tab.
    </div>
</div>

此外，如果您想让第一个选项卡第二次重新加载，您可以:1)将新内容的url添加到 anchor ，例如:

<a href="#content1" data-url="url1">LINK1</a>

2)绑定(bind)tabbselect事件来拦截静态内容加载，将其替换为内容重新加载，例如:

$("#private-area-menu").bind("tabsselect", function(event, ui) {
      if(ui.index==0){
          $('#tab-content').html(''); // required to clear the previous static data
          $('#tab-content').load($(ui.tab).attr('data-url')); // refresh data              
      }
});