jQuery UI Tabs go to specific div in tab

Question

I have basic tabs setup using JqueryUI (simplified to only the two tabs relevant)

 <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Home</a></li>
            <li><a href="#tabs-5">Benefits</a></li>

        </ul>
        <div id="tabs-1">
            <UCHome:UCHome runat="server" />
        </div>
        <div id="tabs-5">
            <UCBenefits:UCBenefits runat="server" />
        </div>
</div>

In the usercontrol for tabs-1 (simplified to the relevant code)

<a class="benefitc" href="#benefitsmodularity">
     <span>Modularity</span>
     <asp:Image runat="server" ImageUrl="../Images/Benefits1.png"/></a> 
<a class="benefitc" href="#benefitsflexibility>
    <span>Flexibility</span><asp:Image runat="server" ImageUrl="../Images/Benefits2.png" /></a>

In the usercontrol for tabs-5 (again simplified)

<div class="homecontent">
    <div id="benefitsmodularity">
        <h2>
            (Modularity)</h2>
        <p>
            Hello
        </p>
    </div>
</div>
<div class="homecontent">
    <div id="benefitsflexibility">
        <h2>
            (Flexibility)</h2>
        <p>
             World
        </p>
    </div>
</div>

homecontent class is simply for styling.

Now basically, I want to redirect from tabs-1 to tabs-5 when a user clicks an image on tabs-1 AND I want it to go to the div relevant to the image. For example if the user clicks Benefits2.png then I want it to go to tabs-5 and have focus on .

So far I have in the document.ready

var $tabs = $("#tabs").tabs();

$('.benefitc').click(function () { // bind click event to link
   $tabs.tabs('select', 4); // switch to tab
   return false;
});

This gets me to the tab correctly but I can't figure out how to get to the correct div. Note, all the clicks should take me to tabs-5 which is index 4.

Any help would be much appreciated. Please let me know if I haven't been clear enough on the question.

Answer 1

Aaaaaaaaaargh said the code monkey when he did something stupid.

This was a silly one from me.

The anchor tags do work but since I was using

$('.benefitc').click(function () { // bind click event to link
   $tabs.tabs('select', 4); // switch to tab
   return false;
});

The return false was stopping the event propogation and default action of the a tags never fired.

So changing that to

return true;

achieved the desired result.

Answer 2

The active option can also be used to set active tab (note - active tab can be used differently when assigned a boolean value and collapsible is true): http://api.jqueryui.com/tabs/#option-active
[text below taken from above link, modified format]

active - Which panel is currently open. Type: Boolean or Integer. Default: 0

Code examples:
Initialize the tabs with the active option specified:

        $( ".selector" ).tabs({ active: 1 });

Get or set the active option, after initialization:

        // getter
        var active = $( ".selector" ).tabs( "option", "active" );<br>
        // setter
        $( ".selector" ).tabs( "option", "active", 1 );