Вкладка Навигация Active JQuery

Question

У меня есть несколько вкладок на моей странице, таких как функции, обзор, изображения и т. Д. Что я хочу сделать, это когда нет содержимого в функциях, я хочу, чтобы вкладка и контент не отображались в моей но только Обзор и изображения, а Обзор должен быть активным, и контент также должен отображаться. Мне удается получить эту функцию, но Обзор не активируется. Единственный способ стать активным - это когда я нажимаю на него. Также содержимое для Обзор не отображается, и его можно увидеть только при щелчке на вкладке «Обзор». Я использую JQuery для этого.

//Remove tabs without content 
if ($(".tab-content-doc:eq(0) p").length == 0) { 
    $("ul.tabs li").eq(0).hide(); 
} 
if ($(".tab-content-doc:eq(1) img").length == 0) { 
    $("ul.tabs li").eq(1).hide(); 
} 
if ($(".tab-content-doc:eq(2) tr.alt").length == 0) { 
    $("ul.tabs li").eq(2).hide(); 
} 
if ($(".tab-content-doc:eq(3) div.prod-table-thumbnail").length == 0) { 
    $("ul.tabs li").eq(3).hide(); 
} 
if ($(".tab-content-doc:eq(4) div.prod-table-thumbnail").length == 0) { 
    $("ul.tabs li").eq(4).hide(); 
} 
if ($(".tab-content-doc:eq(5) span.video-wrapper").length == 0) { 
    $("ul.tabs li").eq(5).hide(); 
} 

Заранее благодарим за ваши предложения.

$("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; 
}}); 

Приведенный выше код - xslt. Файл шаблона имеет этот код. Кажется, что у кода есть логика, чтобы заменить первый на второй, но он все еще не работает.

//--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 
    } 
} 

Answer 1

Если я правильно понимаю ваш вопрос, это звучит, как вы ищете .tab-conent-doc, который пуст, верно? Если это так, моим предложением было бы использовать функцию jQuery children, чтобы узнать, пуст ли каждый элемент или нет.

var $tabs = $('ul.tabs li'), //Get all tabs 
    $tabContent = $('.tab-content-doc'), //Get all tab content 
    idx; 
$tabContent.each(function(i) { //Loop through your tab-content-doc elements 
    if($(this).children().length === 0) { //Are there children? 
     $tabs.eq(i).hide(); //Hide the element that has no children 
    } 
}); 
idx = $tabs.filter(':visible').eq(0).index(); //What is the first visible tab? 
$tabs.eq(idx)....//Do stuff with first visible tab 
$tabContent.eq(idx)....//Do stuff with first visible tab content 

Answer 2

У меня есть ответ со мной. То, что я сделал, было перед вкладкой remove без кода содержимого, есть код, который активирует первую вкладку.

$("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 

Я если-то еще о, чтобы показать, что если первое содержимое вкладки является пустым, то перейдите на вторую вкладку и сделать второй вкладке активным. Код:

if ($(".tab-content-doc:eq(0) p").length != 0) { 
      $("ul.tabs li:eq(0)").addClass("active").show(); //Activate first tab 
      $(".tab-content-doc").hide(); //Hide all tab content 
      $(".tab-content-doc:eq(0)").show(); //Show first tab content 

     } 
     else 
     { 
      $("ul.tabs li:eq(1)").addClass("active").show();//Activate second tab 
      $(".tab-content-doc").hide(); //Hide all tab content 
      $(".tab-content-doc:eq(1)").show(); //Show second tab content 
     } 

Спасибо, Кайл за помощь.