系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
在Magento 2中使用选项卡小部件的步骤：
步骤1：为此，请覆盖list.phtml
app\design\frontend\Themes\Yourtheme\Magento_Catalog\templates\product\list.phtml
<div class="product info detailed">
<div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
<div class="data item title"
data-role="collapsible" id="tab-label-1">
<a class="data switch"
tabindex="-1"
data-toggle="trigger"
href="#temp-1"
id="tab-label-1-title">
<?php __("Tab 1"); ?>
</a>
</div>
<div class="data item content"
aria-labelledby="tab-label-1-title" id="temp-1" data-role="content">
<?php __("Hello Tab 1 Text"); ?>
</div>
<div class="data item title"
data-role="collapsible" id="tab-label-2">
<a class="data switch"
tabindex="-1"
data-toggle="trigger"
href="#temp-2"
id="tab-label-2-title">
<?php __("Hello Tab 2 Text"); ?>
</a>
</div>
<div class="data item content"
aria-labelledby="tab-label-2-title" id="temp-2" data-role="content">
Hello 2 Text
</div>
</div>
</div>在这里，我创建了一个主题并在扩展名中覆盖Magento_catalog list.phtml 文件。您可以在 phtml 文件中的任何位置使用上述代码。
下面是显示两个选项卡的示例。它一次只显示一段内容。更改新的“选项卡”将导致同一组中的其他人消失，而新选项卡将单独显示。
结论：
这样，您就可以在Magento 2中使用选项卡小部件。