2

假设使用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上创建了选项卡式菜单，并且第一个选项卡的内容由服务器请求加载。

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

我如何解决这个问题？

4

2 回答 2

3

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              
      }
});
于 2012-08-27T13:14:37.700 回答
0

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

$('#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，我建议您阅读。

于 2012-08-27T14:10:59.857 回答