Kamal Kamal - 4 months ago 24
HTML Question

jQuery UI Tabs go to specific div in tab

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

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.

Comments