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い#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 で始まるすべての div が非表示になりますtabs

于 2013-04-05T02:19:33.667 に答える