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添加到锚点，例如：

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

2）绑定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              
      }
});

Answer 2

您可以尝试在选项卡加载上重叠回调函数，如：

$('#example').tabs({
        load: function(event, ui) {
            $(ui.panel).delegate('a', 'click', function(event) {
                $(ui.panel).load(this.href);
                event.preventDefault();
            });
        }
});

或在选项卡上选择如下：

$('#example').tabs({
    select: function(event, ui) {
        var isValid = ... // form validation returning true or false
        return isValid;
    }
});

这段摘录取自http://docs.jquery.com/UI/API/1.8/Tabs，我建议您阅读。

基于Ajax内容的jQuery UI选项卡：如何避免AJAX调用加载的第一个面板

2 个答案: