Question

I have jQuery UI tabs on my page, but I would like to use them as a navigation between the pages and not like showing and hiding divs as it was designed to. So basically I still want to use jQuery UI tabs but for global navigation and the correct highlighting.

Anyone could help me with this?

I can navigate already, but I’m still kinda stuck on highlighting the correct item in the following page. Any ideas how to achieve that?

$(document).ready(function() {
  var iSelectedTab = $('div#tabs ul a').filter('a[href="#"]');
  $("#tabs").tabs({
    selected: iSelectedTab,
    select: function (e, ui) {
      window.location.href=ui.tab.href;
    }
  });
});

But it isn’t working. Any ideas?

Answer 1

I don’t see the point of using the Tabs in this case…but to answer your question…

Say that we are in page1.html – for which you need tabs-0 to be active, your tabs structure should be like this (yes – it will not respect the standard structure of Jquery UI tabs):

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">Page 1</a></li>
       <li><a href="page2.html#tabs-2">Page 2</a></li>
       <li><a href="page3.html#tabs-3">Page 3</a></li>
    </ul>
    <div id="tabs-1">This is page 1</div>
</div>

Note that there is no other tab containers in this page. page2.html would have the same structure as above

<div id="tabs">
    <ul>
       <li><a href="page1.html#tabs-1">Page 1</a></li>
       <li><a href="#tabs-2">Page 2</a></li>
       <li><a href="page3.html#tabs-3">Page 3</a></li>
    </ul>
    <div id="tabs-2">This is page 2</div>
</div>

At this point, you don’t need any special JS code,

$("#tabs").tabs({
    select: function (e, ui) {
        window.location.href=ui.tab.href;
    }
});