I'm currently using Jquery tabs within a table, and it's working fine. However, I need to activate the td when its link is clicked.
Here's my code:
$(document).ready(function() {
$(".vertical_tabs_menu a").click(function(event) {
event.preventDefault();
var tab = $(this).attr("href");
$(".vertical_tabs").not(tab).css("display", "none");
$(tab).fadeIn();
});
}).vertical_tabs {
display:none;
}
#tab-1 {
display:block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vertical_tabs_menu">
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="40"> <a href="#tab-1">Tab 1</a></td>
</tr>
<tr>
<td height="40"><a href="#tab-2">Tab 2</a></td>
</tr>
<tr>
<td height="40"> <a href="#tab-3">Tab 3</a></td>
</tr>
<tr>
<td height="40"> <a href="#tab-4">Tab 4</a></td>
</tr>
</table>
</div>
<div class="tab">
<div id="tab-1" class="vertical_tabs" style="display:block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauri...
</div>
<div id="tab-2" class="vertical_tabs">
<p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tor...
</div>
<div id="tab-3" class="vertical_tabs">
<p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condiment...
</div>
<div id="tab-4" class="vertical_tabs">
<p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit ame...
</div>
</div>Can you please help me add a background color class for the entire td without affecting the anchor tags?