feat: 更新产品页面的标签切换功能，优化内容展示逻辑

public/themes/website/1/zh/demo/product.html

@@ -210,7 +210,7 @@
                       data-bs-target="#p-spec-panel-{$key}"
                       role="tab"
                       aria-controls="p-spec-panel-{$key}"
-                      aria-selected="true"
+                      aria-selected="{if $key==1}true{else /}false{/if}"
               >
                 <span class="p-spec__tab-media">
                   <img src="{:deal_image_url($vo.url)}" width="80" height="111" alt="" />
@@ -226,10 +226,15 @@
             </div>
           </div>
 
-          <div class="p-spec__body">
-            <!-- TODO...需要实现切换效果 -->
+          <div class="p-spec__body tab-content">
             {volist name="pic_many" id="vo" key="key"}
-            <!-- 判断显示哪个内容 -->
+            <div
+              class="tab-pane fade {if $key==1}show active{/if}"
+              id="p-spec-panel-{$key}"
+              role="tabpanel"
+              aria-labelledby="p-spec-tab-{$key}"
+              tabindex="0"
+            >
               {switch $key}
               {case 1}{$rich_text_three|raw}{/case}
               {case 2}{$rich_text_four|raw}{/case}
@@ -238,10 +243,11 @@
               {case 5}{$rich_text_seven|raw}{/case}
               {default /}暂无匹配内容
               {/switch}
+            </div>
             {/volist}
 
             {if $total_standard_num == 0}
-            <!-- 仅展示第一个富文本 -->
+            <!-- 无型号 tabs 时仅展示第一个富文本 -->
             {$rich_text_three|raw}
             {/if}