0

我已经在我的网站中实现了一些选项卡以用于产品描述。

它可以工作，但是每个选项卡上的文本会在 2 秒后消失，计数后的某些内容正在将 display:none 样式添加到 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>

提前谢谢了。

4

2 回答 2

0

问题是由这条线引起的

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

你正在全力以赴div。我假设您想在单击其他链接时隐藏。你可能想这样做。#tabsfadeOut#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 开头的 divtabs

于 2013-04-05T02:19:33.667 回答
0

改变这个：

$('#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的 s 的父级: ，所以没有结果，因为它仍然位于其隐藏的父级内部。divfadeIn()$(selectedTab).delay(500).fadeIn('slow')

此外，您<li><a class="selected">...在标记中设置了类，<a>但随后在脚本中，您将类添加到<li>: $('#tabs ul li:first').addClass('active')。这是无关的，但值得指出。

一个Plunk 示例：http://plnkr.co/edit/qg4xQnhOmpUFKDdlGDB7?p=preview与上面的更改概述。

于 2013-04-05T03:04:17.770 回答