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

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 没有加载。

尝试在 <head></head> 标签之间的 theme.liquid 中添加 jQuery，而不是在 header.

中

在标签前添加 jQuery 行。

同时确认您有以下代码：

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

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

希望对您有所帮助。

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

Product Tabs Not Working in Shopify Store

javascript

css

jquery

shopify

shopify-template