1

好的; 使用 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 菜单生成中完成，其中一些参考点被分配给菜单选项卡在此刻。

很抱歉这个问题过长 - 任何帮助都将不胜感激！

4

1 回答 1

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 虽然很生锈，所以语法可能不正确 - 但它应该足以为您指明正确的方向！

于 2012-06-18T10:15:42.253 回答