Question

我已在我的网站中实施了一些标签，用于产品说明。

它正常工作，但每个标签上的文字在2秒后消失，计数后将显示：无样式添加到div。

它从Shopify中的来源获取前5个div，然后从另一个地方拾取最后一个div。

此外，第一个div将填充每个div的所有信息，直到您单击顶部的选项卡，它只显示相应的信息。

这是代码：

<script>
 $(function() {                                   // <== shorter form of doc ready
$('#tabs > div').hide();
$('#tabs div:first').fadeIn('slow');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
    $('#tabs ul li.active').removeClass('active');  // <== Only what you need
    $(this).parent().addClass('active');
    var selectedTab=$(this).attr('href');
    $('#tabs > div').fadeOut('slow', function() {       // <== Use a callback
        $(selectedTab).delay(500).fadeIn('slow');          // <== add a delay
    });        
    return false;
});


});
    </script>



<div id="tabs">
   <ul class="tabs">
     <li><a class="active" href="#tab-1">Why we love it</a></li>
     <li><a href="#tab-2">Made With</a></li>
     <li><a href="#tab-3">How to use</a></li>
     <li><a href="#tab-4">Characteristics</a></li>
     <li><a href="#tab-5">Meet the brand</a></li>
     <li><a href="#tab-6">Recipes</a></li>
   </ul>
  <div class="tabcontainer">
  <div class="description" itemprop="description">
    {{ product.description }}
  <div id="tab-5">
  {% if product.vendor == 'Loving Earth' %}
  {% include 'lovingearth' %}
  {% endif %}   
   </div>  
  </div>
 </div>
</div>

非常感谢提前。

Answer 1

问题是由此行引起的

$('#tabs > div').fadeOut('slow', function() {       // this line
    $(selectedTab).delay(500).fadeIn('slow');
});

您导致div中的所有#tabs转为fadeOut。我假设你想在点击其他链接时隐藏#tab-5。你可能想要这样做。

$('#tab-5').fadeOut('slow', function() {       // this line
    $(selectedTab).delay(500).fadeIn('slow');
});

对您的案例更合适的解决方案是

$('div[id^=tabs]').fadeOut('slow', function() {       // this line
    $(selectedTab).delay(500).fadeIn('slow');
});

这将隐藏ID为tabs

的所有div

Answer 2

改变这个：

$('#tabs > div').fadeOut('slow', function() {       // <== Use a callback
    $(selectedTab).delay(500).fadeIn('slow');          // <== add a delay
});        
return false;

到此：

 $('.tabcontainer div').fadeOut('slow', function() {       // <== Use a callback
    $(selectedTab).delay(500).fadeIn('slow');          // <== add a delay
});        
return false;

由于$('#tabs > div')正在选择<div id="tabs">内的所有元素，所有这些元素都被隐藏 - 包括tabcontainer。由于tabcontainer是div的父亲fadeIn()，而$(selectedTab).delay(500).fadeIn('slow')：<li><a class="selected">...，所以没有结果，因为它仍然位于其隐藏< / em>父母。

此外，您的<a>已在<li>上的类标记中设置，但随后在脚本中，您将该类添加到$('#tabs ul li:first').addClass('active')：{{1} }。这是无关的，但值得指出。

示例Plunk: http://plnkr.co/edit/qg4xQnhOmpUFKDdlGDB7?p=preview ，其中包含上述更改。

JQuery Tabs，将我的div放入display：none

2 个答案: