Question

因此，我使用了https://help.shopify.com/en/themes/customization/products/features/add-tabs-to-product-descriptions上的教程，将产品标签添加到Shopify中。

不幸的是，这些选项卡仍然无法使用。标签确实出现时，如果单击其中一个，它将滚动页面而不是切换到新标签。

看起来jQuery确实无法正常工作。这是我当前使用的代码（仅供参考，我使用的是Narrative主题，网站为https://wellprepared.com）。

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

ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <ul class="tabs">
    <li><a href="#tab1">Description</a></li>
    <li><a href="#tab2">Reviews</a></li>
  </ul>
  <div id="tab1">
    <h5>Description</h5>
  {{ product.description }}
  </div>
  <div id="tab2">
  <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
  </div>
</div>

Answer 1

您的jQuery无法加载。

尝试将jQuery添加到<head></head>标签之间而不是标题中的theme.liquid中。

在标记之前添加jQuery行。

还要确认您具有以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在<head></head>标签之间；在jQuery代码的其他行之上，并且您没有两次，否则会发生冲突。

希望这会有所帮助。

产品标签在Shopify商店中不起作用

1 个答案: