複数レベルのjQueryタブ：関連するタブセクションを開くことができないセカンダリレベルのリンク

Question

ページ上に複数レベルのjQueryタブナビゲーションシステムをまとめようとしています。

つまりリンク1 |リンク2

あなたは 'リンク2' の上に置くと、次のように表示していました：

リンク1を|リンク2 リンク2のリンク1 |リンク2のリンク2

「リンク2のリンク1」または「リンク2のリンク2」のいずれかをクリックすると、ページのそのタブ付きセクションに移動します。現在選択されているタブが「リンク1」であるため、これらのリンクのいずれかのコンテンツが以前隠されていたため、新しいページリクエストが発生しないことに注意してください。

コードは、次の（：簡略化のために合理化注）：である。

<span id="form" class="tabs"> 
<div>   
<ul>    
<li><a href="#blog">Blog</a></li>    
<li><a href="#links">Links</a> 
    <ul id="links-tabs-list">        
    <li><a href="#links_add">Add</a></li> 
    <li><a href="#links_manage">Manage</a></li> 
    </ul> 
    </li> 
    <li><a href="#images">Images</a></li> 
    <li><a href="#more">More..</a></li> 
</ul> 
</div> 

<div id="blog"> // content goes here.. </div> 
<div id="links"> 
    <div id="links_add"> // content goes here </div> 
    <div id="links_manage"> // content goes here </div>   
</div> 
<div id="images"> // content goes here.. </div> 
<div id="more"> // content goes here.. </div> 
</span> 

jQueryのタブが使用して設定され、$（」。タブ）、タブ（）、および細かい作業。さらに、CSSは、 'Links'セクションが表示されるときにのみ表示される 'Links'セクションの 'Add'と 'Manage'リンクでも正しく動作しています。しかし、それが掲示されているとき、 '追加'または '管理'のいずれかをクリックしても、 'links_add'または 'links_manage' id divは表示されません。ただし、他のトップレベルタブリンク（「Images」や「More」など）をクリックすると、正しいタブセクションが表示されます。誰かを願って、セカンダリタブレベルのリンクのいずれかをクリックして、関連するタブコンテンツセクションを開くことができるようにするために必要なことを私に知らせることができます。

希望しています。どんな助けでも大歓迎です。 CSSは、ソリューションを調査する必要がないと仮定ため

UPDATE

申し訳ありませんが、みんな。 、JSについては

.tabs ul { list-style-type: none; padding-left: 0; width: 100%; } 
.tabs ul li { display: inline; } 
.tabs ul li.final { margin-right: 0px; } 
.tabs .ui-tabs-selected a, .tabs .ui-tabs-selected a:hover { cursor: text; text-decoration: none; } 
.tabs ul li, .tabs ul li a { color: #DEDEDE; margin-right: 8px; } 
.tabs ul li a { text-decoration: none; } 
.tabs ul li a:hover { color: #e07979; } 
.tabs .ui-tabs-selected a, .tabs .ui-tabs-selected a:hover{ color: #C24B4B; } 
.tabs ul li ul { display: none; } 
.tabs ul li:hover ul, .tabs ul li.hover ul { position: absolute; display: inline; left: 0; width: 100%; margin: 0; padding: 0; } 
.tabs ul li:hover li, .tabs ul li.hover li { float: left; } 
.tabs ul li:hover li a, .tabs ul li.hover li a { color: #000; } 
.tabs ul li li a:hover { color: #357; } 
.ui-tabs-hide { display: none; } 

私が使用していない：ここでは）2番目のタブレベルのオンホバー場所で、私は承知している（現在は悩まされていない）を念頭に置いて、タブのためでありますカスタムjQueryのタブの実装、および私が使用しているので、唯一の（関連）JSがある：他に必要なものがあれば

$(function(){ 

    $('.tabs').tabs();$('.tabs').tabs(); 

}); 

がある場合、私は知っていて、事前に謝罪させてください！

Answer 1

あなたは間違っているよ！多レベルのタブはjqueryで直接サポートされていませんが、ここにトリックがあります：

<span id="form" class="tabs"> 
<div>   
<ul>    
<li><a href="#blog">Blog</a></li>    
<li><a href="#links">Links</a> 
    </li> 
    <li><a href="#images">Images</a></li> 
    <li><a href="#more">More..</a></li> 
</ul> 
</div> 

<div id="blog"> // content goes here.. </div> 
<div id="links" class="tabs"> 
    <ul id="links-tabs-list">        
    <li><a href="#links_add">Add</a></li> 
    <li><a href="#links_manage">Manage</a></li> 
    </ul> 
    <div id="links_add"> // content goes here </div> 
    <div id="links_manage"> // content goes here </div>   
</div> 
<div id="images"> // content goes here.. </div> 
<div id="more"> // content goes here.. </div> 
</span>