我正在尝试使用jQuery Tabs,但我无法使它们正常工作。
我有这个HTML代码:
<!-- / NAVIGATORE / -->
<div class="navigator windowtemplate movingwindow">
<div class="top">Navigatore <a href="#"><span class="closebutton closedialog"></span></a></div>
<!-- Menu -->
<div class="navi_menu">
<a href="#navi-public"><span class="selected">Stanza Pubbliche</span></a><a href="#navi-private"><span>Stanze Private</span></a><a href="#navi-me"><span>Mie</span></a><a href="#navi-search"><span>Cerca</span></a>
</div>
<div class="body">
<!-- Stanze Pubbliche -->
<div class="public" id="navi-public">
<div class="list scrollbar">
<ul>
<a href="#"><li>Stanza scema <span class="usersinroom red">50</span></li></a>
</ul>
</div>
</div>
<!-- Stanze Private -->
<div class="private" id="navi-private">
<div class="list scrollbar">
<ul>
<a href="#"><li>Stanza scema <span class="usersinroom red">50</span></li></a>
<a href="#"><li>Stanza ancora più scema <span class="usersinroom orange">47</span></li></a>
</ul>
</div>
</div>
<!-- Mie stanze -->
<div class="me" id="navi-me">
<div class="list scrollbar">
<ul>
<a href="#"><li>Stanza scema <span class="usersinroom red">50</span></li></a>
<a href="#"><li>Stanza ancora più scema <span class="usersinroom orange">47</span></li></a>
<a href="#"><li>Stanza scema <span class="usersinroom orange">40</span></li></a>
</ul>
</div>
</div>
<!-- Cerca -->
<div class="search" id="navi-search">
<div class="list scrollbar">
<ul>
<a href="#"><li>Stanza scema <span class="usersinroom red">50</span></li></a>
<a href="#"><li>Stanza ancora più scema <span class="usersinroom orange">47</span></li></a>
<a href="#"><li>Stanza scema <span class="usersinroom orange">40</span></li></a>
<a href="#"><li>Stanza ancora più scema <span class="usersinroom yellow">35</span></li></a>
</ul>
</div>
</div>
</div>
<div class="bottom"></div>
</div>
这个jQuery脚本:
<script>
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("span.navi_menu").tabs("div.body > div");
});
</script>
但这似乎行不通,我错了? :(
(对不起,如果这是一个愚蠢的事情,但我是jQuery的新手,所以我还不知道这个语言好。)
答案 0 :(得分:3)
当您的span
元素为navi_menu
时,您的选择器正在寻找div
。另外,不要在tabs方法中使用选择器,JQuery-UI插件需要方法名称。你的JavaScript应该是:
$("span.navi_menu").tabs();
你的HTML有一些问题。您需要确保构建它与JQuery-UI选项卡的预期非常相似。这意味着将标签包装在<li>
标签中并将其包装在<ul>
标签中。请按照此处的文档:http://api.jqueryui.com/tabs/
以下是包含您已包含的部分HTML的示例模板,您应该可以从那里重新插入HTML:Demonstration