javascript - jQuery 标签 : doesn't work (doesn't change page)

Question

我正在尝试 jQuery 选项卡，但我无法使它们工作。

我有这个 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 的新手，所以我还不太了解这种语言)。

Answer 1

您的选择器正在寻找 span而你的navi_menu元素是 div .另外，不要在选项卡方法中使用选择器，JQuery-UI 插件需要一个方法名称。你的 JavaScript 应该是:

 $("span.navi_menu").tabs();

而且您的 HTML 有一些问题。您需要确保您构建它的方式与 JQuery-UI 选项卡期望您的方式非常相似。这意味着将您的标签包装在 <li> 中标签并将它们包装在 <ul> 中标签。按照此处的文档操作:http://api.jqueryui.com/tabs/

这是一个示例模板，其中包含您包含的一些 HTML，您应该能够从那里重新插入您的 HTML:Demonstration