I am managing a website that includes info-tabs based on a template I found at this link. The tabs contain anchors like example.com/#convey, but unfortunately, direct links to specific tabs using #anchor do not work properly due to the tabs relying on JavaScript for functionality.
This is the JavaScript being used:
/* fading the content in using a sub-menu */
$('.content-fade-menu a').click(function(){
var href = $(this).attr('href');
var target = $('.content-fade').find(href);
$('.content-fade-menu a').removeClass('active');
$(this).addClass('active');
$('.content-fade .content-fade-panel').hide();
$(target).fadeIn('fast');
return false;
});
Here is the HTML code for the menu:
<ul class="sub-menu content-fade-menu">
<li><a href="#pi" class="">Personal Injury</a></li>
<li><a href="#employment" class="active">Employment</a></li>
</ul>
And this is the HTML for one non-active tab and one active tab:
<div class="content-fade">
<div class="content-fade-panel" id="pi" style="display: none;">
Non-active tab
</div>
<div class="content-fade-panel" id="employment" style="display: block;">
Active tab
</div>
</div>
What steps should I take to ensure that links such as example.com/#anchor function correctly?