Hi what I'm trying to do is to create a a tabbed paged in which the elements inside the table can also be used to switch to another tab. I was able to make the tab work using jquery ui but the problem is when I click the element inside the table it does not switch to another tab. Here is my code
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Table</a></li>
<li><a href="#tabs-2">Employee info</a></li>
</ul>
<div id="tabs-1">
<table>
<tr>
<td><a href="#tabs-2">ABC123</a></td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><a href="#tabs-2">ABC124</a></td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
<div id="tabs-2">
<p>Info about ABC123 When clicked</p>
</div>
</div>
Try adding this to your jQuery:
Also, change your HTML to this:
Documentation