1
我正在使用Ruby on Rails 3.0.9，jQuery 1.6.2和jQuery UI。我试图通过以下方式实现嵌套选项卡，尽可能使用documentation，但是当我使用AJAX时，对于那些嵌套选项卡，我得到了一些“奇怪”的行为。使用jQuery UI执行嵌套选项卡时遇到困难
我有两个选项卡（tab1和tab2）每一个都具有两个嵌套的接片（tab1_sub1和tab1_sub2嵌套\有关tab1，tab2_sub1和tab2_sub2嵌套\有关tab2）。
加载包含所提到的标签页面后，输出HTML代码：
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs-1">
tab1 title
</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#ui-tabs-1">
tab2 title
</a>
</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs_sub1-1">
tab1_sub1 title
</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#ui-tabs-2">
tab1_sub2 title
</a>
</li>
</ul>
<div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
tab1 content
</div>
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>
</div>
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>
此时，上显示tab1内容，tab1_sub1和tab1_sub2工作，以及。现在
，点击tab2标题输出HTML代码变为：
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top">
<a href="#tabs-1">
tab1 title
</a>
</li>
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#ui-tabs-1">
tab2 title
</a>
</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs_sub1-1">
tab1_sub1 title
</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="#ui-tabs-2">
tab1_sub2 title
</a>
</li>
</ul>
<div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
tab2 content
</div><div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>
</div>
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#tabs_sub1-1">
tab2_sub1 title
</a>
</li>
<li class="ui-state-default ui-corner-top">
<a href="http://<hostname>/<path>"> # I think here is the problem (read above for more information).
tab2_sub2 title
</a>
</li>
</ul>
<div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
</div>
</div>
</div>
现在，在显示tab2内容，当我点击tab2_sub2标题它会加载在顶部tab2_sub2内容当前页面，不在tab2_sub2选项卡内。也就是说，浏览器将转到URL http://<hostname>/<path>。
的问题（我认为）也正是在下面的代码：
也许href值应该像#ui-tabs-2（作为\在tab1内容），也许有一些jQuery UI的错误当你以这种方式使用嵌套选项卡时...
我该如何解决这个问题？