我正在使用Ruby on Rails 3.0.9，jQuery 1.6.2和jQuery UI。我试图通过跟随尽可能documentation来实现嵌套选项卡，但是当我使用AJAX时，我对这些嵌套选项卡有一些“奇怪”的行为。
我有两个标签（tab1和tab2），每个标签都有两个嵌套标签（tab1_sub1和tab1_sub2嵌套\与tab1相关联，{{1与tab2_sub1相关的嵌套\和tab2_sub2。
加载包含所提及标签的页面后，输出HTML代码为：
tab2此时，在显示<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也会正常工作。
现在，点击输出HTML代码的tab1_sub2标题：
tab2 现在，在显示<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。
问题（我认为）完全在以下代码中：
http://<hostname>/<path>也许...
<a href="http://<hostname>/<path>">
...
值应该类似于href（与#ui-tabs-2内容中的\一样），并且当您以这种方式使用嵌套选项卡时，可能存在一些jQuery UI错误。 ..
我该如何解决？
答案 0 :(得分：1)
问题出在tabs CSS id值中。对于与div相关的每个id <div id="tabs" class="..."> HTML属性，这些属性必须不同。
最简单的解决方案是为tabs1设置tabs2和div个id值。