12

TAB1 的内容由远程 url 的 ajax 加载。选择 TAB1 后，我必须切换到 TAB2，然后再切换回 TAB1 以刷新加载的内容。

单击选项卡时如何使 TAB1 刷新加载的内容？

编辑： HTML代码如下

<div id="tabs">
    <ul>
        <li><a href="url1">Tab1</a></li>
        <li><a href="url2">Tab2</a></li>
    </ul>
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        $tabs = $("#tabs").tabs({
            select: function(event, ui) {
                $('a', ui.tab).click(function() {
                    $(ui.panel).load(this.href);
                    return true;
                });
            }
        });
});
</script>
4

12 回答 12

18

在 jQuery 中刷新选项卡的另一种简单方法是使用 load 方法：

$('#my_tabs').tabs('load', 0);

数值是您希望刷新的选项卡的从零开始的索引。

于 2011-07-26T17:36:09.727 回答
10

1) 在定义加载 ajax 内容的选项卡时，请确保使用 title 属性，该属性将该值放入加载的 div 的 id 中。在我的例子中，标题是“alert-tab”。否则 jquery 生成的 div 有一个神秘的 id：

<li><a href="/alert/index" title="alert-tab">Alert</a></li>

2）现在在要重新加载选项卡的任何事件中使用它：

var href = "/alert/index/";  
$("#alert-tab").load(href);
于 2010-11-18T23:39:31.617 回答
4

您可以简单地删除单击的选项卡的内容，然后使用相同的内容（或您想要的任何内容）重新加载它。例如：

$( "#tabs" ).tabs({                                                                  
  activate:function(event,ui){ 
    //Remove the content of the current tab
    ui.newPanel.empty();
    //load the file you want into current panel
    ui.newPanel.load('content'+(ui.newTab.index()+1)+'.php');                                                 
  }                                                                          
});

在这种情况下，例如，如果单击第二个选项卡，则面板将被清空并重新加载content2.php

于 2014-05-22T04:55:53.603 回答
2

在这个问题上苦苦挣扎，因为标签似乎会杀死点击事件......所以我只是使用了 mousedown。

$("#tabs ul.ui-widget-header")
 .delegate("li.ui-tabs-selected","mousedown",function(){
   $tabs.tabs("load",$(this).index());
 });

这个问题是不久前发布的，但我希望它对某人有所帮助。

于 2012-02-16T22:26:55.447 回答
2

这就是我的做法。需要注意的一点是，我发现分配给呈现每个选项卡内容的 DIV 的 ID 的命名非常可预测，并且始终与所选选项卡中锚点的 href 相对应。这个解决方案取决于这种情况，所以我想它可能会被批评为“太脆弱”。我从中提取代码的表单是一种可重用的控件，它可能会或可能不会托管在选项卡中，所以这就是我在执行 .each() 之前检查 parentID 的值的原因。

//I get the parentID of the div hosting my form and then use it to find the appropriate anchor.
var parentID = '#' + $('#tblUserForm').parent().attr('id');
//Trying to enable click on an already selected tab.
if(parentID == '#ui-tabs-3') //The value of var parentID
{
     $('#tabs a').each(function() {
          if($(this).attr('href') == parentID)
          {
              $(this).bind('click', function() {  
                  $(parentID).load(your_URL_here);
              });
          }
    });
}
于 2011-10-08T03:51:51.753 回答
1

要做到这一点，您只需要在创建期间保存全局链接：

ui_tabs = $( "#tabs" ).tabs();

毕竟可以使用它涉及API负载

例如：转换选项卡的页面部分上的所有链接

$('#tabs .paging a').click(function(e){
    var selected = ui_tabs.tabs('option', 'selected');
    ui_tabs.tabs('url', selected, e.target.href);
    ui_tabs.tabs('load', selected);
    return false;
})
于 2011-05-19T21:51:54.870 回答
1

我对 jQuery 选项卡中的一些 ajax 内容有同样的问题。

该选项卡会加载一个浮动图，但只有当它是您首先加载的选项卡时才会起作用。

我用一种俗气的工作解决了这个问题，但它很有效。

我把我所有的 flot js 代码都转储到一个单独的 .js 文件中，然后把它放在一个函数中

function doFlotGraph(data){
    $.plot({plotcode});
};

然后我在选项卡中执行了以下操作

$.getScript('url/doFlotGraph.js',function(){
    doFlotGraph(data);
});

这允许 flot 做它的事情，因为在 ajax $.getScript 被激活时，选项卡中准备好的文档已经完成。

然后，您可以将 ajax 放在该选项卡的 .click 中。

于 2010-01-05T17:12:18.510 回答
1

好的，把东西放在一起我有这个用于 jquery 选项卡的单击事件，周围的 div 有一个选项卡的 id，如下所示：

<div id="tabs">

在文档就绪函数中执行以下操作：

 $('#tabs > ul > li > a').each(function (index, element) {
    $(element).click(function () {         
        $('#tabs').tabs('load', index); 
    });

由于 Scott Pier，它为每个选项卡注册了点击事件，并带有选项卡的索引

我的文档中也有这个，以防止缓存

 $("#tabs").tabs({
    ajaxOptions: {
        cache: false,
        error: function (xhr, status, index, anchor) {
            $(anchor.hash).html(
      "Couldn't load this tab. We'll try to fix this as soon as possible. " +
      "If this wouldn't be a demo.");
        }
    }
});
于 2012-04-12T14:06:53.937 回答
0

由于这个问题在很长一段时间内已被多次回答，因此发布更新最新版本的 jquery 不会有什么坏处。我正在使用 jquery-ui 1.10.3 并且 Trevor Conn 所做的假设似乎不再有效。但是，他的方法帮助我进行了一些修改。假设我希望刷新的选项卡名为“tab_1”（列表项的 ID）

<div id="tabs" class="tabs">
    <ul>
        <li id="tab_1">
            <a href="my_link">tab one</a>
        </li>
        ...(other tabs)...
    </ul>
</div>

在我刷新标签内容的javascript方法中，我写（使用jquery）：

var tab = $('#tab_1');
var id = tab.attr('aria-controls');
var url = $('a',tab).attr('href');
$("#"+id).load(url);

属性“aria-controls”包含包含选项卡内容的 div 的 id。“区域控制”可能是一个更合乎逻辑的名称，但作为一个歌剧爱好者，我没有抱怨。:-)

于 2014-10-10T14:14:53.650 回答
0

我找到了解决这个问题的方法。在尝试了所有这些方法之后，它们都不适合我。所以为了简单起见，我想出了这个解决方案，虽然它不是最优雅的方式，但它仍然可以工作。

首先将焦点设置在不同的选项卡上，然后将焦点返回到要刷新的选项卡。

$("#myTabs").tabs("option", "active", 0);  
$("#myTabs").tabs("option", "active", 1);
于 2015-04-27T15:22:26.333 回答
0

在 jQuery 调用的“成功”上，您可以将 html 替换为新的 html。

您尚未发布任何代码，因此您可能已经在这样做了，但是；

success: function(msg) {
    $('.TabOne').html(msg);
}

如果您要返回 html，则上述方法有效。如果您要返回一个对象，那么您可能需要做额外的工作，但总的来说，以上应该可以工作。

编辑 我还应该提到 .TabOne 是一个类名。因此，您的标签内容持有者必须有一个 TabOne 类才能使上述代码正常工作。

请记住，类名也不必作为一种样式实际存在。

编辑 2

嗯，我知道你现在要做什么，我有点茫然。将做一些测试，也许能够回复你。

对不起。

于 2009-10-28T02:38:33.577 回答
0

我知道这个链接很旧，但我遇到了同样的情况。我试图理解并整合这里所说的所有内容，但它仍然无法正常工作，否则它会破坏我所拥有的。

我有一个带有 4 个选项卡的模式对话框，索引值为 0、1、2、3，我想在选项卡 1 上打开，所以在我的代码中有以下行：

    $("#tabs").tabs('select',1);

并且选项卡 1 将始终包含以前的显示数据（html ajax 内容），直到我单击不同的选项卡（例如选项卡 2）然后返回（到选项卡 1）...所以我做了以下操作：

    // this forces tab content update
    $("#tabs").tabs('select',1);
    $("#tabs").tabs('select',2);
    $("#tabs").tabs('select',1);

它奏效了:)

于 2013-12-24T08:44:37.837 回答