我正在创建一个使用 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');
}
新文档.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>
我该如何解决这个问题？
谢谢，
最佳答案
我发现我必须使用缓存。我会回答自己的问题以帮助他人。
添加 cache: true 到 tabs() 标志:
//Create tabs
$("#mainTabs").tabs({load: function()
{
//Make accordion from template selector
$(".selectTemplate").accordion();
}, cache: true})
关于javascript - 每次单击时，jQuery UI 都会重新加载我的选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1776444/