Use jQuery tabs as a site navigator?

Question

I want to use jQuery tabs as a navigator, i.e. the tabs shouldn't actually contain anything but instead, when user clicks all the other tabs then the current, it should navigate to another page.

Also, when arriving to that page, I want that second tab shoould be visible onload.

Example:

Page1.aspx:

    Page1    |    Page2    |    Page3    |    Page4
Page1 content|    blank    |    blank    |    blank

The tab titles for page 2, 3 and 4 should be just links to the appropriate page.

Page2.aspx:

    Page1    |    Page2    |    Page3    |    Page4
    blank    |Page2 content|    blank    |    blank

The tab titles for page 1, 3 and 4 should be just links to the appropriate page.

And so on.

I want to place the tabs pager in a master page, then fill-in the content in each page its respective tab and leave the others blank.

Answer 1

Are you sure you don't want something like this:

<ul>
    <li><a href="somepage1.aspx" class="selected">Link 1</a></li>
    <li><a href="somepage2.aspx">Link 2</a></li>
    <li><a href="somepage3.aspx">Link 3</a></li>
    <li><a href="somepage4.aspx">Link 4</a></li>
</ul>
<div id="content1">
    <p>Some content for page 1</p>
</div>

I don't see what you're using jQuery for?...

Answer 2

jQuery supports loading of content via ajax, simply by pointing the A link to a url instead of a div id. But as far as I know there is no way to actually make it go to another page. You're probably better off just using the existing css definitions for the tabs and not using the ui tabs plugin

UPDATE. This is the basic html/css mockup for the tabs. You will need to download a copy of jquery ui so you get the css and images, but this is the skeleton which makes the tabs.

<ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected"><a href="/">Home</a></li>
    <li class="ui-tabs-nav-item"><a href="/somepage.html">Some Page</a></li>
</ul>

Answer 3

Inspired by Mark's answer, and after some trial and error and digging through the jQuery UI CSS file, I got the following to work using jQuery UI's own styles.

<div id = "nav-bar" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class = "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class = "ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Current Tab</li>
    <li class = "ui-state-default ui-corner-top"><a href="/some_page">To Some Page</a></li>
  </ul>
</div>

and in another CSS file add this

#nav-bar.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding: .5em 1em !important;}