Onglets jQuery. Liaison entre les onglets à l'onglet

Question

Mise à jour

Salut les gars!

Got le lien entre travail, mais maintenant je suis face à un autre problème. Lorsque j'ai cliqué sur le lien dans l'onglet et cliqué sur le menu "Tab" à nouveau, les onglets ressemblent à de la merde. Voir le lien et le code de l'exemple de travail ci-dessous.

Mfg

muttmagandi

http://www.vallatravet.se/thetabs/

$(document).ready(function(){ 


$(".fadeOut").fadeTo(0, 0.5); 

$("#forklara").bind("click", function(e) 
{ 
    $("div:hidden:#one").fadeIn("slow"); 

}); 

$(".Rehabilitering").bind("click", function() { 

    var $tabs= $("#container-1").tabs(); 
    $tabs.tabs('select', 3); // switch to third tab 
    $("div:hidden:#one").fadeIn("slow"); 

    return false; 
}); 

$(".SO").bind("click", function() { 

    var $tabs= $("#container-1").tabs(); 
    $tabs.tabs('select', 3); // switch to third tab 
    $("div:hidden:#two").fadeIn("slow"); 

    return false; 
}); 
}); 
</script> 
     <div id="container-1"> 
     <ul> 
      <li><a href="#fragment-1"><span>one</span></a></li> 
      <li><a href="#fragment-2"><span>two</span></a></li> 
      <li><a href="#fragment-3"><span>three</span></a></li> 
      <li><a href="#fragment-4"><span id="forklara">four</span></a></li> 
     </ul> 

     <div id="fragment-1"> 
      <div class="cat-1"> 
       <li><a href="#Rehabilitering" class="Rehabilitering">Rehabilitering</a></li> 
       <li><a href="#SO" class="SO">Second opinion</a></li> 
       <li>Krisstöd</li> 
       <li>Specialistläkarbesök</li> 
       <li>Cancerbehandling</li> 
      </div> 
      <div class="cat-2"> 
       <li>Dagkirurgi</li> 
       <li>Inläggning på sjukhus</li> 
       <li class="fadeOut">Sjukgymnastik, naprapat & kiropraktor</li> 
       <li class="fadeOut">Psykologi</li> 
       <li class="fadeOut">Personstöd</li> 
      </div> 
     </div> 

     <div id="fragment-2"> 
      <div class="cat-1"> 
       <li><a href="#tolast" class="tolast">Rehabilitering</a></li> 
       <li>Second opinion</li> 
       <li>Krisstöd</li> 
       <li>Specialistläkarbesök</li> 
       <li>Cancerbehandling</li> 
      </div> 
      <div class="cat-2"> 
       <li>Dagkirurgi</li> 
       <li>Inläggning på sjukhus</li> 
       <li>Sjukgymnastik, naprapat & kiropraktor</li> 
       <li class="fadeOut">Psykologi</li> 
       <li class="fadeOut">Personstöd</li> 
      </div> 
     </div> 

     <div id="fragment-3"> 
      <div class="cat-1"> 
       <li><a href="#tolast" class="tolast">Rehabilitering</a></li> 
       <li>Second opinion</li> 
       <li>Krisstöd</li> 
       <li>Specialistläkarbesök</li> 
       <li>Cancerbehandling</li> 
      </div> 
      <div class="cat-2"> 
       <li>Dagkirurgi</li> 
       <li>Inläggning på sjukhus</li> 
       <li>Sjukgymnastik, naprapat & kiropraktor</li> 
       <li>Psykologi</li> 
       <li>Personstöd</li> 
      </div> 
     </div> 

     <div id="fragment-4"> 
      <div id="one" style="padding:25px 0px 0px 20px; display:none;"><b>Rehabilitering</b><br /> 
      The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. 
      </div> 

      <div id="two" style="padding:25px 0px 0px 20px; display:none;"><b>Second opinion</b><br /> 
      Ytterligare bedömning av annan läkare vid allvarlig sjukdom eller svårt medicinskt ställningstagande. 
      </div> 

     </div> 

    </div> 

Answer 1

Je pense que votre problème est juste une accolade manquante et entre parenthèses dans votre JavaScript parce que le même code fonctionne très bien avec ces deux choses ajoutées - http://jsbin.com/eriba/2.

$(document).ready(function(){ 
    var $tabs= $("#container-1").tabs(); 
    $('.tolast').click(function() { 
      $tabs.tabs('select', 2); 
     return false; 
    }); 

Devrait être ...

$(document).ready(function(){ 
    var $tabs= $("#container-1").tabs(); 
    $('.tolast').click(function() { 
      $tabs.tabs('select', 2); 
     return false; 
    }); 
}); 

Answer 2

pas, votre problème est que ici:

var $tabs= $("#container-1").tabs(); 
$('.tolast').click(function() { 
     $tabs.tabs('select', 2); 
    return false; 
}); 

vous avez sélectionné les éléments avec classname 'tolast' qui points onclick au troisième onglet.

ici vous pouvez voir que vous avez deux de cet élément qui a la classe mis à « tolast »

<div class="cat-1"> 
    <li><a href="#fragment-4" class="tolast">Link to four</a></li> 
</div> 
<div class="cat-2">     
    <li><a href="#fragment-4" class="tolast">Link to three</a></li> 
</div> 

Je suis sûr que lorsque vous cliquez sur l'une des ancres que l'onglet troisième ouvrira (que je peux voyez c'est faux).

Je propose quelque chose comme ceci:

<div class="cat-1"> 
    <li><a href="#fragment-4" class="to-forth">Link to four</a></li> 
</div> 
<div class="cat-2">     
    <li><a href="#fragment-4" class="to-third">Link to three</a></li> 
</div> 

alors:

var $tabs= $("#container-1").tabs(); 
$('.to-forth').click(function() { 
    $tabs.tabs('select', 3); // go to forth tab 
    return false; 
}); 
$('.to-third').click(function() { 
    $tabs.tabs('select', 2); // go to third tab 
    return false; 
});