jQuery Tabs. Linking within tabs to tab

Question

Update

Hi guys!

Got the linking working but now im facing another problem. When i've clicked the link within the tab and clicks on the "Menu"-tab again, the tabs look like shit. See working example link and code below.

Rgds

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

I think your problem is just a missing brace and parenthesis in your JavaScript because the same code works fine with those two things added - http://jsbin.com/eriba/2 .

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

Should be...

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

Answer 2

no, your problem is that in here:

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

you have selected the elements with classname 'tolast' which the onclick points to the third tab.

here you can see you have two of that element that has the class set to '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>

I'm sure when you click either of that anchors the third tab will open (Which I can see it's wrong).

I suggest something like this:

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

then:

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