0

我的页面中有几个选项卡，例如功能、概述、图像等。我想要做的是当功能中没有内容时，我希望功能选项卡和内容不显示在我的页面中，而只显示概述和图像和概述应该是活动的，内容也应该显示。我设法得到了这个功能，但概述没有变得活跃。它变得活跃的唯一方法是当我点击它时。概述的内容也没有显示，只有当我单击概述选项卡时才能看到。我正在使用 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
    }
}
4

2 回答 2

0

如果我正确理解您的问题，听起来您正在寻找的.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
于 2013-06-10T16:36:29.167 回答
0

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

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

感谢凯尔帮助我。

于 2013-06-13T20:38:48.927 回答