Onglets jQuery. . . J'ai besoin de tout faire !!! (MouseOver, naviguez depuis l'onglet cliquez sur et gardez les onglets sélectionnés en fonction de la page)

Question

Après avoir parcouru toutes les docs jQuery, les questions SO et les blogs aléatoires, j'ai été incapable de trouver une réponse à mon problème.

Actuellement, je transfère un site Coldfusion vers un site .Net. Dans ma masterpage pour le site, j'ai tous mes éléments de navigation car c'est juste la partie administrative du site.

Le code html de navigation:

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

Dans mon tête DE MON MASTER PAGE:

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

Le site que vous pouvez dire a 4 (bien 3 vraiment) sections principales: Assurance Plans, mini-sites, sites indépendants et outils. Sous chacune de ces sections, il y a plusieurs pages (toutes utilisant la même page maître).

La fonction de survol de la souris fonctionne très bien, les divs se cachent et s'affichent comme prévu. Les problèmes que j'ai, c'est que div id="fragment-1" est sélectionné sur chaque page pour chaque section. (Par exemple, dans la section Outils, div id="fragment-4", j'ai besoin d'être sélectionné.J'ai essayé d'ajouter $('#tabs').tabs('option', 'selected', 3); à la fois dans la tête de la page .aspx et dans la page maître pour les tests et j'obtiens une erreur. jetant $('#tabs').tabs('option', 'selected', 3); dans le $ (document) fonction .ready, et il jette encore une erreur, à la fois dans la page .aspx et le masterpage

Solution au problème ci-dessus. Placer

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

à la fin d'une page dans la section "3" permet la sélection par défaut de l'onglet approprié

Lors du retrait:

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

de l'en-tête de la page principale.

Pour couronner le tout, j'ai besoin de cliqueter les onglets pour naviguer (pas une charge d'ajax, mais j'ai besoin pour l'utilisateur, en cliquant sur l'onglet pour être pris à une page différente. .? analogue à document.location()

quelqu'un peut-il s'il vous plaît aider à la deuxième partie, je suis un n00b jQuery

Answer 1

pour la première partie , vous pourriez faire ce que karim79 a suggéré et essayer de comprendre quelle page il est et définir la valeur par défaut en conséquence.

Cela va avant de les onglets:

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 
} 

vous pouvez faire:

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

Maintenant, pour la deuxième question: Si je comprends bien, vous voulez que les gens à cliquer sur les noms des onglets et être redirigé? Cela peut être fait en liant l'événement click. Vous devez d'abord attribuer un identifiant à chaque A dans votre 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> 

Ensuite, une fonction qui prendra cet ID et de décider où envoyer l'utilisateur:

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 
    } 
} 

Et puis le lier à l'un:

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

(je n'ai pas testé tout cela si: P)

Answer 2

Avez-vous essayé.

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

Answer 3

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