jQuery UI 选项卡。在非 ajax 选项卡中重新加载活动选项卡答案

【问题标题】：jQuery UI tabs. Reload active tab in non-ajax tabjQuery UI 选项卡。在非 ajax 选项卡中重新加载活动选项卡
【发布时间】：2010-02-01 22:18:53
【问题描述】：

可以通过使用从其他选项卡之一中加载/选择（非 ajax）选项卡

$('#mytabscontainer').tabs('select', 3)

但是，我需要能够重新加载活动选项卡，而上述方法不适用于此。也没有

$('#mytabcontainer').tabs('load', 3)

关于如何实现这一点的任何想法？

** 解决方案 **

在 jQuery 'tabs' 插件中，替换包含以下内容的行：

if (($li.hasClass('ui-tabs-selected') && !o.collapsible) ||

与

if (

并在页面中添加一个css/或者编辑jQuery css文件，这样就可以得到：

div.ui-tabs ul li.ui-tabs-selected a {cursor: pointer !important;}

这将更改选项卡，以便它们始终可以选择，即使它们以前被点击过。

【问题讨论】：

为什么需要重新加载非 ajax 选项卡的内容？ load 方法仅适用于 ajax 选项卡仅供参考。
嗯，在其中一个选项卡中有一个项目列表。还有一个将项目添加到列表的链接。添加新链接后，我想刷新列表。似乎比动态地将新项目添加到列表中更容易。

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

如果你的标签有这个 html：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="ajax/content1.html">Ajax Tab 1</a></li>
        <li><a href="ajax/content2.html">Ajax Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu</p>
    </div>
</div>

选项卡 1 是非 ajax 选项卡。该选项卡没有可以刷新的网址。所以你首先需要给它一个url，然后才能重新加载它：

var tabs = $('#tabs').tabs();
tabs.tabs( 'url', 0,'ajax/content0.html');
tabs.tabs('load', 0);

记住选项卡是零索引的。

【讨论】：

如果我不想远程加载原始选项卡怎么办？另请参阅我帖子的第一条评论下方的评论。
听起来你只需要让它添加新项目的脚本发回列表，这样你就可以用它刷新 html。
这相当于刷新标签。但我想这是不可能的。
嗯，我想这是一个解决方案。我有这个怎么样：|选项卡1 |标签2 |标签3 |单击 tab2 将显示链接列表（“列表”）。单击列表中的一个链接将删除列表，并显示一堆与单击项目相关的内容（“内容”）。现在，当我读完“内容”后，我想再次显示“列表”。我可以通过在“内容”中包含一些元素来做到这一点，当单击该元素时，会删除“内容”并重新启用“列表”。我认为只重新启用选项卡中的链接并让用户单击选项卡再次会更自然。（嗯，cmets 中没有格式化？）

【解决方案2】：

如果你的标签页的html是这样的......

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">NON AJAX TAB</a></li>
    </ul>
    <div id="tabs-1">
        NON AJAX CONTENT
    </div>
</div>

如果发生这种情况的页面是“page.html”

$("#tabs-1").load("page.html #tabs-1");

应该做的伎俩

【讨论】：

另请注意：如果调用.load() 时将选择器表达式附加到 URL，就像这里的情况一样，脚本会在 DOM 更新之前被剥离，因此不会执行。

【解决方案3】：

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

$( "#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 重新加载

【讨论】：