Question

我正在使用XSLT和XML来生成我的HTML。

我有以下XML。

1）destinationTabs.xml

<?xml version="1.0"?>
<list type="Tabs">
<tab id="594978-64" title="Overview" url="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx" />
<tab id="597468-64" title="Guide" url="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx" />
<tab id="597348-64" title="Flight Schedule" url="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx" />
<tab id="597238-64" title="Special Offers" url="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx" />
<tab id="597243-64" title="Photos" url="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx" />
</list>

现在我想使用XSLT生成以下HTML。

<ul class="tabHead tabs-nav">
            <li class="tabLeftEnd"></li>            
            <li class="tabs-selected" id="tab-1"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"><span>Overview</span></a></li>           
            <li id="tab-2"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"><span>Guide</span></a></li>
            <li id="tab-3"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"><span>Flight Schedules</span></a></li>            
            <li id="tab-4"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"><span>Special Offers</span></a></li>           
            <li id="tab-5"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/Photo.aspx"><span>Photos</span></a></li>           
            <li class="tabRightEnd"></li>   
</ul>

请注意，这些选项卡取决于destinationTabs.xml中标签ID的编号，并且当任何用户单击所需选项卡时，将调用新页面并且也会选择它。

在每个标签的选择上都有一个“标签选择”类。

请建议！

Answer 1

此转化：

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="html" omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <xsl:param name="pSelectedNo" select="1"/>

 <xsl:template match="/*">
  <ul class="tabHead tabs-nav">
   <li class="tabLeftEnd"></li>
     <xsl:apply-templates/>
   <li class="tabRightEnd"></li>
  </ul>
 </xsl:template>

 <xsl:template match="tab">
  <li id="tab-{position()}">
    <xsl:if test="position() = $pSelectedNo">
      <xsl:attribute name="class">tabs-selected</xsl:attribute>
    </xsl:if>
    <a href="{@url}"><span><xsl:value-of select="@title"/></span></a>
  </li>
 </xsl:template>
</xsl:stylesheet>

应用于提供的XML文档：

<list type="Tabs">
    <tab id="594978-64" title="Overview"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx" />
    <tab id="597468-64" title="Guide"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx" />
    <tab id="597348-64" title="Flight Schedule"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx" />
    <tab id="597238-64" title="Special Offers"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx" />
    <tab id="597243-64" title="Photos"
    url="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx" />
</list>

生成想要的正确结果：

<ul class="tabHead tabs-nav">
   <li class="tabLeftEnd"></li>
   <li id="tab-1" class="tabs-selected"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"><span>Overview</span></a></li>
   <li id="tab-2"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"><span>Guide</span></a></li>
   <li id="tab-3"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"><span>Flight Schedule</span></a></li>
   <li id="tab-4"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"><span>Special Offers</span></a></li>
   <li id="tab-5"><a href="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx"><span>Photos</span></a></li>
   <li class="tabRightEnd"></li>
</ul>

Answer 2

此样式表：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="list">
        <ul class="tabHead tabs-nav">
            <li class="tabLeftEnd"></li>
            <xsl:apply-templates/>
            <li class="tabRightEnd"></li>
        </ul>
    </xsl:template>
    <xsl:template match="tab">
        <li id="tab-{position()}">
            <a href="{@url}">
                <span>
                    <xsl:value-of select="@title"/>
                </span>
            </a>
        </li>
    </xsl:template>
</xsl:stylesheet>

输出：

<ul class="tabHead tabs-nav">
    <li class="tabLeftEnd"></li>
    <li id="tab-1">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx">
            <span>Overview</span>
        </a>
    </li>
    <li id="tab-2">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx">
            <span>Guide</span>
        </a>
    </li>
    <li id="tab-3">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx">
            <span>Flight Schedule</span>
        </a>
    </li>
    <li id="tab-4">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx">
            <span>Special Offers</span>
        </a>
    </li>
    <li id="tab-5">
        <a href="/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx">
            <span>Photos</span>
        </a>
    </li>
    <li class="tabRightEnd"></li>
</ul>

注意：关于@class：您需要通过javascript或者在已审核资源中的元数据将参数传递给样式表。

如何使用xslt生成随机选择html

2 个答案: