Having trouble setting a specific tab as active when navigating from different links.
I have found a solution, but it involves writing code for each individual tab. Can someone offer assistance in simplifying the code?
<table class="nav nav-tabs">
<tr>
<td><a href="#home" data-toggle="tab" class="active">Home</a></td>
<td><a href="#profile" class="profile-link" data-toggle="tab">Profile</a></td>
<td><a href="#messages" class="next-link" data-toggle="tab">Messages</a></td>
</tr>
</table>
<div class="tab-content">
<div class="tab-pane active" id="home">Home Content</div>
<div class="tab-pane" id="profile">Profile Content</div>
<div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>
<a href="#profile" data-toggle="tab" data-toggle-tab=".profile-link" class="outside-link">External Profile Link</a>
<a href="#messages" data-toggle="tab" data-toggle-tab=".next-link" class="next-link">Next</a>
<script>
$(".outside-link").click(function() {
$(".nav-tabs tr td a").removeClass("active");
$($(this).attr("data-toggle-tab")).parent("td").find("a").addClass("active");
});
$(".next-link").click(function() {
$(".nav-tabs tr td a").removeClass("active");
$($(this).attr("data-toggle-tab")).parent("td").find("a").addClass("active");
});
</script>