Tab Navigation Active JQuery
I have couple of tabs in my page like Features, Overview, Images etc. What i want to do is When there is no content in Features, I want to feature tab and content not to be shown in my page but only Overview and Images and the Overview should be the active one and content should be shown too. I manage to get the feature out but Overview does not become active. The only way it become active is when i click it. Also the contents for Overview is not shown and only can be seen when i click the Overview Tab. I am using JQuery to do this.
//--Features
if ($(".tab-content-doc:eq(0) p").length == 0) {
$("div.tab-content").eq(0).hide();
$("div.tabs").eq(0).hide();
$("ul.tabs li").eq(0).hide();
}
//--Overview
if ($(".tab-content-doc:eq(1) img").length != 0) {
$("ul.tabs li").eq(1).show();
}
//--Images & Videos
if ($(".tab-content-doc:eq(2) div.tab-content-wrapper").length != 0) {
$("ul.tabs li").eq(2).show();
}
var activeTab = defaultTab();
if(activeTab != null && activeTab != "" && activeTab != "undefined") {
var index = activeTab.replace("tab","") - 1;
//Check if its valid tab to show
if ($("ul.tabs li").eq(index).is(":visible")) {
$("ul.tabs li").removeClass("active").addClass("inactive"); //Replace "active" class
$("ul.tabs li:eq("+ index +")").removeClass("inactive").addClass("active"); //Replace "active" class to selected tab
$(".tab-content-doc").hide(); //Hide all tab content
$(".tab-content-doc:eq("+ index +")").show(); //Show selected tab content
}
}
Thanks in advance for your suggestions.
$("ul.tabs li:first").show(); //Activate first tab
$(".tab-content-doc").hide(); //Hide all tab content
$(".tab-content-doc:first").show(); //Show first tab content
$("a.magnifying-glass.open-cbox").colorbox({opacity: '0.75', html: function () {
var _html = document.createElement('div');
_html.innerHTML = document.getElementById('prod-img-zoom').innerHTML;
return _html;
}});