HTML 选项卡式描述

Question

我在向我的 Shopify 商店添加选项卡式描述时遇到问题，我尝试了以下选项但没有成功！

第一个问题是我不确定我是否正确使用了 split 标签，因为该函数不会提取代码。

其次，标签式描述在一个视图中显示所有信息。似乎不是更溢出的盒子格式？

如有帮助将不胜感激！我不是编码员，但我试了一下。你能帮忙吗？

Product.liquid

选项 1：将 {% section 'product-template' %} 替换为下面的 HTML

Option-2: 没有替换只是添加

要么产品-template.liquid

选项 3：将 {% section 'product-template' %} 替换为下面的 HTML

Option-4: 没有替换只是添加

要么产品描述 HTML 编辑器

选项 5：添加 HTML

HTML

<div id="product_tabs">
  <ul>
    <li class="tab_1"><a href="#tabs-1"><h4>Description</h4></a></li>
    <li class="tab_2"><a href="#tabs-2"><h4>Specs</h4></a></li>
    <li class="tab_3"><a href="#tabs-3"><h4>Shipping</h4></a></li>
    <li class="tab_4"><a href="#tabs-4"><h4>Returns/Refunds</h4></a></li>
  </ul>
  <div id="tabs-1">
    {% if product.description contains '<!-- split -->' %} 
      {{ description[0] }} 
    {% else %} 
    <p>No Content</p>
    {% endif %}
  </div>
  <div id="tabs-2">
    {% if product.description contains '<!-- split -->' %} 
      {{ description[1] }}
    {% else %}
      <p>No Content</p>
    {% endif %} 
  </div>
                   <div id="tabs-3">
    {{ pages.shipping-policy.content }}
  </div>
  <div id="tabs-4">
    {{ pages.refund-policy.content }}
  </div>
</div>

CSS 添加到 Theme.scss.liquid

#product_tabs > ul {
  list-style: none;
  margin: 0;
}
#product_tabs > ul > li {
  display: inline-block;
  border: 1px solid;
  padding: 10px;
}
#product_tabs > ul > li h4 {
  margin: 0;
}
#product_tabs > ul > li.ui-tabs-active {
  background: #ddd;
}

Answer 1

在我看来，好像没有任何东西可以使选项卡处于活动状态或非活动状态。您忘记 post 一些代码了吗？如果不是，它解释了为什么所有的东西都被同时显示出来。如果没有告诉它何时显示，它将像您描述的那样背靠背显示所有内容。

有关拆分工作原理的说明，请参阅 here。本质上它可以从数组中提取；但是我不知道为什么你的产品描述会是一个数组。

shopify 官方帮助中心创建了一个 post 制作选项卡，过去对很多人有用，请参阅 here。

HTML 选项卡式描述

HTML Tabbed Description

shopify