Use jQuery tabs as a site navigator?

Question

Hi

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

Playing with jQuery Tabs - Retrieve tabs content from different page

Answer 2

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 3

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 4

is this what you're thinking about?

http://theoew.50webs.com/Testing/tabs/

uses jquery and jquery ui