У вас определенно возникли небольшие проблемы с дублированным атрибутом идентификатора «Tabs». Следующий пример должен достичь того, что вы ищете:
Основной файл (внешняя вкладка)
<html>
<head id="Head1" runat="server">
<title></title>
<link type="text/css" href="http://static.jquery.com/ui/themes/base/ui.base.css"
rel="stylesheet" />
<link type='text/css' href='http://static.jquery.com/ui/themes/base/ui.tabs.css'
rel='stylesheet'>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
</head>
<body>
<div id="OuterTab">
<ul>
<li><a href="#InnerTab1" title="InnerTab1"><span>InnerTab1</span></a></li>
<li><a href="#InnerTab2" title="InnerTab2"><span>InnerTab2</span></a></li>
</ul>
<div id="InnerTab1">
</div>
<div id="InnerTab2">
</div>
</div>
<script type="text/javascript">
$(function() {
$("#OuterTab").tabs();
$('#InnerTab1').load('tab1.html', function() {
$('#tabs').tabs();
});
$('#InnerTab2').load('tab2.html', function() {
$('#tabs2').tabs();
});
});
</script>
</body>
</html>
Tab 1 (tab1.html)
<div id="tabs">
<ul>
<li><a href="#tabB1"><span>InnerTabB1</span></a></li>
<li><a href="#tabB2"><span>InnerTabB2</span></a></li>
</ul>
<div id="tabB1">
This is tab b1 content
</div>
<div id="tabB2">
This is tab b2 content
</div>
</div>
Tab 2 (tab2.html)
<div id="tabs2">
<ul>
<li><a href="#tabA1"><span>InnerTabA1</span></a></li>
<li><a href="#tabA2"><span>InnerTabA2</span></a></li>
</ul>
<div id="tabA1">
This is tab A1 content
</div>
<div id="tabA2">
This is tab A2 content
</div>
</div>
Таким образом, когда вы запускаете ваш основной файл, два файла вкладок запрашиваются через jQuery и загружаются в соответствующие div. Затем я определил обратный вызов для активации только что загруженных вкладок.
Если вам нужна дополнительная информация, просто оставьте комментарий.