マルチレベルのjQueryタブ付きナビゲーションシステムをページにまとめようとしています。
つまり、リンク 1 | リンク 2
「Link 2」にカーソルを合わせると、次のように表示されます。
リンク 1 | リンク 2 リンク 2 のリンク 1 | リンク 2 リンク2のリンク2
「Link 2's Link 1」または「Link 2's Link 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 タブは、$('.tabs').tabs() を使用して設定され、正常に動作しています。さらに、CSS は、「リンク」にカーソルを合わせたときにのみ表示される「リンク」セクションの「追加」および「管理」リンクでも正しく機能しています。ただし、ホバー時に「追加」または「管理」をクリックしても、「links_add」または「links_manage」ID div が表示されません。ただし、他のトップレベルのタブ リンク (「画像」や「その他」など) をクリックすると、正しいタブ付きセクションが表示されます。セカンダリ タブ レベルのリンクのいずれかをクリックして関連するタブ コンテンツ セクションを開くには、何をする必要があるか誰かが教えてくれることを願っています。
私がはっきりしていることを願っています！どんな助けでも大歓迎です。
アップデート
ソリューションを調査するために CSS は必要ないと思い込んで申し訳ありません。これはタブ用です。2 番目のタブ レベルのホバー時の位置を認識している (そして現在気にしていない) ことを念頭に置いてください)。
.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; }
JS に関しては、私はカスタム jQuery タブの実装を使用していないため、使用している唯一の (関連する) JS は次のとおりです。
$(function (){
$('.tabs').tabs();$('.tabs').tabs();
});
他に必要なものがある場合は、お知らせください。事前にお詫び申し上げます。