jQuery Tabs: doesn't work (doesn't change page)

Question

I'm trying the jQuery Tabs but i cannot make them work.

I have this HTML code:

<!-- / 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>

And this jQuery script:

<script>
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("span.navi_menu").tabs("div.body > div");
});
</script>

But this seems to not work, where i'm wrong? :(

(Sorry if this would be a stupid thing, but i'm newbie with jQuery, so i don't already know good this language).

Answer 1

Your selector is looking for a span while your navi_menu element is a div. Also, don't use a selector inside the tabs method, JQuery-UI plugins expect a method name. Your JavaScript should be:

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

And your HTML had some issues. You need to make sure you're structuring it very similar to how JQuery-UI tabs expects you to. That means wrapping your tabs in <li> tags and wrapping those in a <ul> tag. Follow the documentation here: http://api.jqueryui.com/tabs/

Here's a sample template with some of the HTML you've included, you should be able to reinsert your HTML from there: Demonstration