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

时间:2010-02-01 22:18:54

标签: jquery jquery-ui jquery-ui-tabs

从其他一个标签中加载/选择(非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;}

这将更改标签,以便它们始终可以选择,即使它们之前已被点击过。

3 个答案:

答案 0 :(得分:2)

如果你的标签有这个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);

请记住,标签是零索引的。

答案 1 :(得分: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");

应该做的伎俩

答案 2 :(得分:0)

您只需删除所点击的标签内容,然后使用相同的内容(或任何您想要的内容)重新加载。例如:

$( "#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