我正在使用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的錯誤當你以這種方式使用嵌套選項卡時...
我該如何解決這個問題?