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

问题描述 投票:0回答:1

所以我使用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>
javascript jquery css shopify shopify-template
1个回答
0
投票

你的jQuery没有加载。

尝试在<head></head>标记之间的theme.liquid中添加jQuery,而不是在标题中。

在标记之前添加jQuery行。

同时确认您有以下代码:

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

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

希望这可以帮助。

© www.soinside.com 2019 - 2024. All rights reserved.