Trying to incorporate a tab navigation menu.
Came across this fantastic fiddle example http://jsfiddle.net/S78Bt/3/ that perfectly demonstrates what I want to achieve. However, I'm facing some difficulties in getting the tabify function to work.
Followed this link for assistance: Programmatically change tab using tabify jquery plugin
In the linked question, it was mentioned that the tabify function is no longer supported, so we have to manually code it out. It seems that I might have made a mistake while integrating the JS with my webpage as the tabs are unresponsive.
Sharing my code snippets below:
JS script:
<script>
(function(a){a.fn.extend({tabify:function(e){function c(b){hash=a(b).find("a").attr("href");return hash=hash.substring(0,hash.length-4)}function f(b){a(b).addClass("active");a(c(b)).show();a(b).siblings("li").each(function(){a(this).removeClass("active");a(c(this)).hide()})}return this.each(function(){function b(){location.hash&&a(d).find("a[href="+location.hash+"]").length>0&&f(a(d).find("a[href="+location.hash+"]").parent())}var d=this,g={ul:a(d)};a(this).find("li a").each(function(){a(this).attr("href", a(this).attr("href")+"-tab")});location.hash&&b();setInterval(b,100);a(this).find("li").each(function(){a(this).hasClass("active")?a(c(this)).show():a(c(this)).hide()});e&&e(g)})}})})(jQuery);
$(document).ready(function(){
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
$('#ulaa').tabify();
setActive($('#target'));
});
</script>
And here's the UL containing the tabs:
<ul id="ulaa">
<li class="active"><a href="#a">abcd</a></li>
<li id="target" ><a href="#bb">asdbk</a></li>
<li><a href="#c">texte</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">inserttexthere</a></li>
</ul>
<div class="contenta" id="a">
jQuery is a cross-browser…
</div>
<div class="contenta" id="bb">
The Prototype JavaScript…
</div>
<div class="contenta" id="c">
Ext (X-t) is a JavaScript…
</div>
This setup exists within a single HTML file. Is there an additional step I need to take?
The desired functionality should be that upon clicking on a tab, the corresponding tab gets the 'active' class while removing the same from the previously active tab. Additionally, a div associated with the ID and the href of the tab should be displayed beneath the horizontal tabs.
Can anyone point out what's amiss with this code?