0

我有一个 JQuery 选项卡的以下 html 内容：

<div id=tabs >
    <ul>
        <li><a href=#tab1>Tab 1</a></li>
        <li><a href=#tab2>Tab 2</a></li>
    </ul>
    <div id=tab1>Content of Tab1</div>
    <div id=tab2>Content of Tab2</div>
</div>

我通过在我的 js 中调用以下函数来呈现选项卡：

function checkerTabs_jqueryui_init(){
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
}

只要我将内容直接放在我的初始 jsp 页面（不是 ajax）中，一切都可以正常工作。但是如果我通过 ajax 调用将内容加载到页面中：

$( "#tabs" ).load(
        'fetchTabs', null, checkerTabs_jqueryui_init
    );

它不会将内容呈现为选项卡，就像没有应用 tabs() 函数的列表一样。ajax 调用返回完全相同的 html 内容，并且肯定调用了回调函数，但我不明白为什么它不能正确呈现。我错过了什么吗？

4

1 回答 1

0

我自己终于想通了。问题的根本原因是<div id=tabs>不止一次调用 tabs() 。第一次一切正常。但是当我再次加载 div 的内容并在 div 上再次调用 tabs() 函数时，它不起作用。我仍然想知道为什么 JQuery 对此如此感伤，但我通过以下方式解决了它：

<div id=tabs>每次完全加载内容。我的意思是通过我的 ajax load() 函数将整个 div 加载到<td>标签中，该函数实际上重置了应用于 div 的 css 类的状态。

所以 jquery 每次都像第一次一样工作。可能如果您<div id=tabs>在调用 tabs() 之前删除所有应用到的类，它也可以正常工作。

于 2013-06-18T07:27:32.643 回答