Question

我想使用xslt创建一个bootstrap手风琴menu 并从xml文件中读取数据。我有这个xslt

  <xsl:template match="/Settings">
<xsl:for-each select="Area">
    <div class="panel-group configuration-menu-style" id="Menu">
      <div class="panel panel-default">
          <div class="panel-heading">
              <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#Menu" href="#{@Caption}">
                     <xsl:value-of select="@Caption"/>
                  </a>
              </h4>
          </div>
          <div id="{@Caption}" class="panel-collapse collapse in">
              <div class="panel-body custom-padding">
                  <table class="table">
                    <xsl:for-each select="Category">
                      <tr>
                          <td class="configuration-submenu-style">
                             <xsl:value-of select="@Caption"/>
                          </td>
                      </tr>
                    </xsl:for-each>
                  </table>
              </div>
          </div>
      </div>    
  </div>
</xsl:for-each>

在这一行

<div id="{@Caption}" class="panel-collapse collapse in">

我根据属性和作品给出id。在浏览器中使用开发人员工具我可以看到id =“MENU OPTION2”问题出在这一行

<a data-toggle="collapse" data-parent="#Menu" href="#{@Caption}">
   <xsl:value-of select="@Caption"/>
</a>

在浏览器中使用开发者工具我可以看到这个元素有href =“＃MENU％20OPTION2

那么......如何从href中移除％20？

解决方案

<a data-toggle="collapse" data-parent="#Menu" href="#{position()}">

 <div id="{position()}" class="panel-collapse collapse in">

因为'id =“MENU OPTION2”无效，因为id不应包含空格'

Answer 1

id="MENU OPTION2"无效，因为id不应包含空格

看看这个： What are valid values for the id attribute in HTML?

所以我建议您使用"MENU_OPTION2"或"MENU-OPTION2"，因为在对这些字符串进行urlencoding时没有区别。

- 编辑 -

顺便说一句，我记得我很久以前就已经开始研究过这类话题...... http://xul.ccoste.fr/

如果你看一下我的XSLT文件http://xul.ccoste.fr/xul-bootstrap.xsl，我使用generate-id()来确保ID之间永远不会有任何冲突。

<xsl:template match="tabs">
<ul class="nav nav-tabs">
  <xsl:for-each select="tab">
      <li>
        <xsl:if test="position() = 1">
          <xsl:attribute name="class"><xsl:text>active</xsl:text></xsl:attribute>
        </xsl:if>
        <a data-toggle="tab" href="#{generate-id(../..)}-{position()}">
          <xsl:value-of select="@label" />
        </a>
      </li>
  </xsl:for-each>
</ul>

使用XSLT创建基于属性的href到id

1 个答案: