javascript - XSLT でループを使用してタブにコンテンツを表示する

Question

XSLTを使用してタブでデータを表示しようとしています。私が望むのは、異なるタブに異なるサブカテゴリを表示することです。例: メイン カテゴリは車両で、サブカテゴリは車、バスなどです。tab1 に車、tab2 にバスなどが必要です。車のタブとコンテンツをアクティブにしたい。これまでのところ、タブに車があり、コンテンツの下にバスがタブに表示され、コンテンツの下に別のタブとコンテンツが表示されます.JavaScriptと関係があることはわかっていますが、それは苦手です. 誰か提案があれば、私はあなたの助けに感謝します.

        <div id="subcat-carousel-wrapper">

                <ul class="tabs">
                  <xsl:for-each select="childCategories/category">
                    <li id="tab1" class="active">
                      <a href="#tab1">
                        <h2>
                          <xsl:value-of select="properties/property[@name='DisplayName']"/>
                        </h2>
                      </a>
                    </li>
                    <div class="tab-content">
                      <a class="series-name" style="display:none">
                        <xsl:value-of select="properties/property[@name='Id']"/>
                      </a>
                      <xsl:variable name="subcatPages" select="ceiling(count(childProducts/product) div 4)"/>
                      <div class="carousel-mask" >
                        <div class="productsDiv" runat="server">

                          <xsl:for-each select="childProducts/product">
                            <xsl:if test="position() mod 4 = 0">
                              <div class="subcat-carousel-product-box">
                                <a class="subcat-links">
                                  <xsl:attribute name="href">
                                    <xsl:variable name="productId" select="properties/property[@name='Id']"/>
                                    <xsl:value-of select="concat('../Pages/ProductDetails.aspx?pid=', $productId)"/>
                                  </xsl:attribute>
                                  <div class="subcat-thumbnail">
                                    <xsl:if test="Images/category/childProducts/product/properties/property[@name='Gallery_thumbnail']">
                                      <xsl:variable name="imageUrl" select="Images/category/childProducts/product/properties/property[@name='Gallery_thumbnail']"/>
                                      <img class="carouselThumb">
                                        <xsl:attribute name="src">
                                          <xsl:value-of select="concat($MediaUrl, $imageUrl)"/>
                                        </xsl:attribute>
                                        <xsl:attribute name="title">
                                          <xsl:value-of select="properties/property[@name='DisplayName']"/>
                                        </xsl:attribute>
                                        <xsl:attribute name="alt">
                                          <xsl:value-of select="properties/property[@name='DisplayName']"/>
                                        </xsl:attribute>
                                      </img>
                                    </xsl:if>
                                  </div>
                                  <h2>
                                    <xsl:value-of select="properties/property[@name='DisplayName']"/>
                                  </h2>
</xsl:for each>
</ul>

ありがとうございました