我使用Jquery 1.4.2。以下是使用标签的代码。
<div id="tabs">
<ul>
<li><a href="#unit"><span>Unit Information</span></a></li>
<li><a href="#documents"><span>Documents</span></a></li>
<li><a href="#x"><span>x</span></a></li>
<li><a href="#y"><span>y</span></a></li>
</ul>
<div id="unit"></div>
<div id="documents">
<input type="button" id="add_file" onclick="add_file()" />
<table>
<tr>
<td>ID</td>
<td>File Name</td>
</tr>
</table>
</div>
<div id="x"></div>
<div id="y"></div>
</div>
当我运行命令
时$('#tabs').tabs('option','selected')
它正确显示了tabIndex。
但是
$('#tabs').tabs('load',1)
似乎根本不起作用。它没有重新加载标签内容。
这是Jquery版本的问题吗？
答案 0 :(得分：1)
如果我理解你的问题，那不是jQuery版本的问题。尽管如此，您的设计是不正确的。但是，由于您使用的是jQuery 1.4.2版，因此您应该知道you must use jQueryUI 1.8.24 or less。因此：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
</head>
回到你的问题。由于您正在上传文件，因此您将文件（可能通过表单或更好的AJAX）发布到另一个PHP文件。 Javascript没有机会展示它。
使用AJAX添加文档的工作原理（以及发生的一切/以您希望的方式显示）。你可以手动完成，或者我可以推荐其中一个插件：
为了证明我的观点，在下面的例子中，我使用js / jQ模拟“添加文件”。正如你在演示中看到的那样，新数据显得很好。
$('#add_file').click(function() {
$('#documents').find('table').append('<tr><td>002</td><td>another_file.doc</td></tr>');
});
有关AJAX如何工作的一些简单示例，请参阅这些SO帖子：
请上传任何有用的帖子。
以下是您要执行的操作的代码示例。该示例有效，但我很遗憾地看到没有您的jQuery / jQueryUI版本。请尝试使用当前版本的示例（将代码复制/粘贴到Web服务器上的.PHP文档中），然后再使用1.4.2 / 1.8.24版本 - 当前版本正常工作。 （您可以通过取消注释/评论头部中明显的标签来轻松切换版本）如果没有别的，也许您可以使用此工作示例作为起点，至少。
请注意，我没有在后端执行任何操作来接收/处理上传的文件。我不得不在某处剪切示例，因此没有编写后端处理文件。但是这里有一个链接，您可以看到一个示例：http://hayageek.com/ajax-file-upload-jquery/（向下滚动到“服务器端”部分）
**完全正常工作示例：只需在服务器上复制/粘贴到PHP文档**
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css" />
-->
<link href="//cdn.jsdelivr.net/jquery.uploadfile/2.0.7/css/uploadfile.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/jquery.uploadfile/2.0.7/js/jquery.uploadfile.min.js"></script>
<link rel="stylesheet" href="//getbootstrap.com/dist/css/bootstrap.min.css" />
<script src="//getbootstrap.com/dist/js/bootstrap.js"></script>
<style>
*, body {font-size:12px;}
table, th, td, tr {border-collapse:collapse;border:1px solid lightgrey;}
th {background:lightgrey;border:1px solid grey;}
td {height:25px;}
th.id {width:30px;}
th.fn {width:125px;}
#add_file{margin-bottom:15px;}
.fn {width:200px;height:30px;padding:5px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var cnt = 2;
$('#tabs').tabs();
$('#add_file').button(); //for visual appearance only
$('#dox').click(); //auto-open the Documents tab for convenience
//init dialog box
$('#addbox').dialog({
autoOpen:false,
title: "Add File:"
}); //END #addbox.dialog
$('#add_file').click(function() {
//Invisibly upload your file to the server
var uploadObj = $("#fileuploader").uploadFile({
url: "name_of_php_file_that_receives_your_uploaded_doc.php",
method: "POST",
allowedTypes:"xls,doc,pdf",
fileName: "myfile",
multiple: false,
autoSubmit: true,
showStatusAfterSuccess:false,
onSuccess:function(files,data,xhr) {
upfilename = $('.ajax-file-upload-filename').html();
upfilename = upfilename.split(' ')[1];
upfilename = upfilename.split('<')[0];
$('#documents').find('table').append('<tr><td>00'+cnt+'</td><td>' +upfilename+ '</td></tr>');
$('#addbox').html('');
$('#addbox').dialog('destroy');
//Add filename and any other data to your MySQL database
$.ajax({
type:'POST',
url: 'your_functions_file_on_server.php',
data:'func_name=insert_file_into_db&upfilename=' + upfilename
});
},
});
//Open dialog box to display the Add File controls. Although appearing to come
//AFTER the #addbox.destroy code, this happens first. The "Upload" button that
//launches the entire process is actually in your jQUI #addbox dialog, which
//gets opened NOW... As soon as that button is pressed, the ^above^ code runs.
$('#addbox').dialog('open');
}); //END #addfile.click
}); //END $(document).ready()
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#unit"><span>Unit Information</span></a></li>
<li><a href="#documents" id="dox"><span>Documents</span></a></li>
<li><a href="#x"><span>x</span></a></li>
<li><a href="#y"><span>y</span></a></li>
</ul>
<div id="unit"></div>
<div id="documents">
<input type="button" id="add_file" value="Add File" />
<table>
<tr>
<th class="id">ID</th>
<th class="fn">File Name</th>
</tr>
<tr>
<td>001</td>
<td>myfile.doc</td>
</tr>
</table>
</div>
<div id="x"></div>
<div id="y"></div>
</div>
<div id="addbox">
<div id="fileuploader"></div>
</div>
</body>
</html>