css - 通过 CSS 操作 xslt 菜单

Question

好的；使用 Umbraco CMS 我有一个按以下方式生成的 xslt 菜单:

    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <!-- Input the documenttype you want here -->
    <xsl:variable name="level" select="1"/>

    <xsl:template match="/">


 <ul id="topNavigation">
       <li class="home">
         <xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
             <xsl:attribute name="class">home current</xsl:attribute>
         </xsl:if>
         <a href="/">Home</a>
       </li>
      <xsl:for-each select="$currentPage/ancestor-or-self::*
      [@level=$level]/*
      [@isDoc and string(umbracoNaviHide) != '1']">
  <li>
     <xsl:if test="@id = $currentPage/@id">
        <xsl:attribute name="class">current</xsl:attribute>
      </xsl:if>
    <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
      <span><xsl:value-of select="@nodeName"/></span>
    </a>
  </li>


</xsl:for-each>
</ul>

    </xsl:template>

它循环通过至少一个 xml 表(我对 xslt 不是很熟悉)，它通过将页面附加到菜单系统来生成菜单。相信这段xml在这个过程中意义重大

<p><a href="http://umbraco.org/get-started"
title="Get Started with Umbraco">Get more information</a> about the
umbraco way.</p>
]]></bodyText>
        <umbracoNaviHide>0</umbracoNaviHide>
      </umbTextpage>
      <umbTextpage id="1071" parentID="1068" level="3" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="3" createDate="2010-09-07T13:19:40" updateDate="2012-06-04T21:47:02" nodeName="Getting started" urlName="getting-started" writerName="redacted" creatorName="redacted" path="-1,1061,1068,1071" isDoc="">

        <bodyText><![CDATA[
<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>
]]></bodyText>
        <umbracoNaviHide>0</umbracoNaviHide>
      </umbTextpage>
    </umbTextpage>
    <umbTextpage id="1177" parentID="1061" level="2" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="4" createDate="2012-06-05T11:28:36" updateDate="2012-06-05T11:33:13" nodeName="Our Clients" urlName="our-clients" writerName="redacted" creatorName="redacted" path="-1,1061,1177" isDoc="">
      <bodyText><![CDATA[
<h3>Our Clients</h3>

<p>etc. etc.</p>

<!-- endUmbMacro -->]]></bodyText>
      <umbracoNaviHide>0</umbracoNaviHide>
    </umbTextpage>
    <umbTextpage id="1072" parentID="1061" level="2" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="5" createDate="2010-09-07T13:20:06" updateDate="2012-06-08T11:23:26" nodeName="Contact us" urlName="contact-us" writerName="redacted" creatorName="redacted" path="-1,1061,1072" isDoc="">
      <bodyText><![CDATA[
<h3>Office address</h3>

例如，nodeName 用作选项卡内容的字符串(即上面的 xml 代码中有标记为“我们的客户”和“联系我们”的选项卡，它们的排序方式与它们相同写在上面。

我的问题涉及到我需要能够更改各种选项卡的背景颜色 - 不要让它们都具有相同的颜色。但是，唯一具有唯一 ID 的选项卡似乎是“主页”选项卡。在相关的 CSS 数据中:

#naviWrap { background-color:#000; background-color:rgba(0,0,50,0.5); margin:15px 0 0 0; } /*menu */
#topNavigation { border-left:1px solid rgba(255,255,255,0.25); margin:0 auto; width:960px; }
#topNavigation li { border-left:1px solid rgba(0,0,0,0.25); border-right:1px solid rgba(255,255,225,0.25); display:inline-block; height:60px; line-height:60px; text-align:center; }
#topNavigation li a { color:#fff; display:block; font-size:11px; height:60px; padding:0 30px; text-decoration:none; text-transform:uppercase; font-style: italic; font-weight:bold;}
#topNavigation li a:hover { background-color:#000; background-color:rgba(0,0,0,0.2); text-decoration:none; }
#topNavigation li.current { background-color:#200; background-color:rgba(350,0,100,0.5); }
#topNavigation li.current a {}

li.current 与主页选项卡(菜单中的第一个选项卡)相关，而其余选项卡由 naviWrap 控制。 'li a' 与选项卡的文本颜色有关。

那么有什么方法可以单独控制 CSS 中的选项卡吗？我认为它必须在 xml 级别完成(例如，与 umbTextpage id="1177"等内容相关)，或者在 xslt 菜单生成中完成，其中一些引用点被分配给菜单选项卡在这一点上。

很抱歉这个问题太长了 - 任何帮助都将不胜感激!

Answer 1

您可以试试这个，在您的 xsl 文件中，这是 for-each 中的位循环:

  <li>
     <xsl:attribute name="class">list-<xsl:value-of select="position()"/><xsl:if test="@id = $currentPage/@id"> current</xsl:if></xsl:attribute>
    <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
      <span><xsl:value-of select="@nodeName"/></span>
    </a>
  </li>

基本上你在每个 <li> 上添加一个类基于 position()在您的 for-each 循环中，为您提供以下类型的输出:

<li class="list-0">
<li class="list-1">
<li class="list-2 current"> //current will appear on the right li item as before, along with list-n class

然后很容易定位每个 <li>使用 CSS:

#topNavigation li.list-0 {
   background-color: #f00;
}
#topNavigation li.list-1 {
   background-color: #0f0;
}
#topNavigation li.list-2 {
   background-color: #00f;
}

等等

虽然我的 xslt 很生疏，所以语法可能不正确 - 但它应该足以为您指明正确的方向!