jQuery Shopify 木材标签

Question

我正在尝试在 shopify 中的产品页面上实现标签。我显示了选项卡，单击时选项卡似乎发生了变化，但容器不是 refreshing/loading 数据

jQuery

<script>
$(document).ready(function() {
  $('ul.tabs').each(function(){
    // activate tabs
    var active, content, links = $(this).find('li');
    active = links.first().addClass('active');
    content = $(active.attr('href'));
    links.not(':first').each(function () {
      $($(this).attr('href')).hide();
    });
    // activate content
    $(this).find('li').click(function(e){
      active.removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).attr('href'));
      active.addClass('active');
      content.show();
      return false;
    });
  });
});

制表符HTML

<div>
        <ul class="tabs">
          <li class="tab-title active"><a href="#tab-1">Product details</a></li>
          <li class="tab-title"><a href="#tab-2">Delivery options</a></li>
          <li class="tab-title"><a href="#tab-3">Returns</a></li>
        </ul>
        <div id="tab-1" class="tabs-content">
          <div class="content contained active"> 
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            </div>
          </div>  
        </div>
        <div id="tab-2" class="tabs-content">
          <div class="content contained"> 
            <div>       
                {% include 'shipping' %}   
            </div>
          </div>  
        </div>
        <div id="tab-3" class="content contained">
        {{ pages.returns.content }}
        </div>        
      </div>

Answer 1

此 content = $(active.attr('href')); 和 content = $($(this).attr('href')); 将为空，因为 li 没有任何 href。应该是 content = $(active.find('a').attr('href')); 和 content = $($(this).find('a').attr('href'));

试试这个

$(document).ready(function() {
  $('ul.tabs').each(function(){
    // activate tabs
    var active, content, links = $(this).find('li');
    active = links.first().addClass('active');
    content = $(active.find('a').attr('href'));
    links.not(':first').each(function () {
      $($(this).find('a').attr('href')).hide();
    });
    // activate content
    $(this).find('li').click(function(e){
      active.removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).find('a').attr('href'));
      active.addClass('active');
      content.show();
      return false;
    });
  });
});

jQuery Shopify 木材标签

jQuery Shopify Timber Tabs

html

jquery

shopify

timber