的index.html：

Question

我正在创建一个使用AJAX加载标签的Web应用程序。我的问题是，如果我有多个选项卡，jQuery每次再次单击它时都会重新加载一个选项卡（在访问另一个选项卡后）。

这是我的代码：

的index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Air Office - New file</title>
<!-- jQuery -->
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="jqueryui/css/custom-theme/jquery-ui-1.7.2.custom.css" />

<!-- Scripts -->
<script type="text/javascript" src="JS/main.js"></script>
</head>
<body>
<input type="button" onclick="newDoc();" value="New document" />
<div id="mainTabs">
<ul>
</ul>
</div>
</body>
</html>

main.js：

$(document).ready(function()
{
    //Create tabs
    $("#mainTabs").tabs({load: function()
    {
        //Make accordion from template selector
        $(".selectTemplate").accordion();
    }}).find(".ui-tabs-nav").sortable({axis:'x'});
    //Create new document tab
    newDoc();
});

function newDoc()
{
    //Create new tab
    $("#mainTabs").tabs('add', 'newdocument.html', 'New Document');
}

newdocument.html：

<div>
<h1>Please select a template</h1>
<div class="selectTemplate">
    <h3><a href="#">Document</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Blank</li>
            <li>Letter</li>
            <li>Envelope</li>
            <li>Business card</li>
        </ul>
    </div>
    <h3><a href="#">Spreadsheets</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Blank</li>
            <li>Check list</li>
            <li>Budget</li>
        </ul>
    </div>
    <h3><a href="#">Presentations</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>White</li>
            <li>Black</li>
            <li>Nature</li>
            <li>Space</li>
        </ul>
    </div>
    <h3><a href="#">Form</a></h3>
    <div>
        <ul class="selectTemplateTable">
            <li>Survey</li>
            <li>Exam</li>
        </ul>
    </div>
</div>
</div>

我该如何解决这个问题？

谢谢，

Answer 1

我发现我必须使用缓存。我会回答我自己的问题来帮助别人。

将cache：true添加到tabs（）标志：

//Create tabs
 $("#mainTabs").tabs({load: function()
 {
  //Make accordion from template selector
  $(".selectTemplate").accordion();
 }, cache: true})

每当我点击它们时，jQuery UI都会重新加载我的标签

的index.html：

main.js：

newdocument.html：

1 个答案: