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

我有答案。我所做的是在没有内容代码的删除选项卡之前，有一个代码可以激活第一个选项卡。

$("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-else语句来显示如果第一个标签内容为空，则转到第二个标签并激活第二个标签。代码是：

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
      }

谢谢Kyle帮助我。

选项卡导航活动JQuery

2 个答案: