jQuery Tabs . . . I need to do it all!!! (MouseOver, Navigate from tab click and keep tabs selected based upon page)

Question

After reading through all of the jQuery doc, SO questions, and random blogs, I have been unable to find an answer to my problem.

Currently I am porting a Coldfusion Site to a .Net site. In my masterpage for the site I have all of my navigation elements as it is just the Administrative portion of the site.

The navigation html code:

<div id="tabs" class="basictab">
                    <ul>
                        <li><a href="#fragment-1"><span>Insurance Plans</span></a></li>
                        <li><a href="#fragment-2"><span>Mini-Sites</span></a></li>
                        <li><a href="#fragment-3"><span>Independent Sites</span></a></li>
                        <li><a href="#fragment-4"><span>Tools</span></a></li>
                    </ul>

                    <div id="fragment-1" class="tabcontainer">
                        <nav:insurance runat="server" ID="ins1" Visible="true" />
                    </div>
                    <div id="fragment-2" class="tabcontainer">
                        <nav:mini runat="server" ID="mini1" Visible="true" />
                    </div>
                    <div id="fragment-3" class="tabcontainer">
                       <div>
                    <div id="fragment-4" class="tabcontainer">
                      <nav:tools runat="server" ID="tools2" Visible="true" />
                    </div>
                </div>

In my header OF MY MASTER PAGE:

<script type="text/javascript" >
  $(document).ready(function(){
    $("#tabs").tabs({event: 'mouseover'});
  });
    </script>

The site as you can tell has 4 (well 3 really) major sections: Insurance Plans, Mini-Sites, Independent Sites and Tools. Under each one of these sections there are several pages (all which use the same master page).

The mouse over function works great, the divs hide and display as expected. The problems that I am having is that div id="fragment-1" is selected on every page for every section. (As an example, when in the Tools Section, div id="fragment-4", I need it to be selected. I have tried adding $('#tabs').tabs('option', 'selected', 3); in both the head of the .aspx page and in the masterpage for testing and I get an error. Additionally I have tried throwing $('#tabs').tabs('option', 'selected', 3); into the $(document).ready function, and it still throws an error, both within the .aspx page and the masterpage.

Solution to above problem: Placing

<script type="text/javascript" >
$(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", 3);
  });
    </script>

at the end of a page in section "3" allows the appropriate tab to be default selected.

While removing:

<script type="text/javascript" >
$(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
   });
    </script>

from the header of the master page.

To top it all off, I need the tabs to be clickable to navigate (not an ajax load, but I need for the user, when clicking on the tab to be taken to a different page. I would assume this would be analogous to window.location().

Can anyone please help with the second part? I am a jQuery n00b.

Answer 1

Have you tried:

  $(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", 3);
  });

Answer 2

.tabcontainer:not(:target) { display: none; }

Answer 3

For the first part, you could do what karim79 suggested and try to figure out what page it is and set the default accordingly.

This goes before setting the tabs:

var path = window.location.pathname.split('/'); // This will give you an 
                                                // array of the parts of the url

var defaultTab;  // Initialize the default tab variable 

// Just as an example, let's imagine your urls look like this:
// administration/mini-site
switch ( path[1] ) // Path[0] is 'administration' in this example
{
   case 'mini-site':
      defaultTab = 1; // The number to pass as the default
   break;

   case 'insurance-plans':
      defaultTab = 5; 
   break;   

// etc. etc. etc. 
// A case for each individual page
}

then you can do:

 var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", defaultTab);

Now for the second question: If I understood correctly, you want people to click on the tabs' names and be redirected? This can be done by binding the click event. You must first assign an ID to each A in your navigation:

<li><a href="#fragment-1" id="insurance"><span>Insurance Plans</span></a></li>
<li><a href="#fragment-2" id="minisites"><span>Mini-Sites</span></a></li>

Then make a function that will take that ID and decide where to send the user:

function redirect(e)
{
    var id = $(this).attr('id');

    switch (id)
    {
        case 'minisites':
            window.location = 'http://www.something.com/administration/mini-sites';
        break;

        case 'insurance':
            window.location = 'http://www.something.com/administration/insurance';
        break;
        //etc etc etc
    }
}

And then bind it to the a:

$('#tabs a').bind('click', redirect);

(I didn't test any of this though :P)