-3

我已经写了一个 xml、xsd 和一个 xsl 文件，我想知道如何执行以下操作：

如果用户点击某个链接，页面会显示某个段落。如果用户点击不同的链接，页面将显示不同的段落。这怎么可能？谢谢你。

编辑：

这是代码。这个想法是，如果我单击表中的 CountryName，我会显示有关该国家/地区的信息，如果单击另一个，它将显示该国家/地区。信息将在 ws:CountryName/ws:Information 中，并且会有文字和图片。

XSL：

 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
                 xmlns:ws="http://www.w3schools.com"
                 version="1.0"> 

 <xsl:template match="/">
 <html>
 <body>
 <table border="1">
 <tr bgcolor="red"><th>Country</th></tr>

 <xsl:for-each select="ws:Categorie/ws:Countries/ws:Country">
      <tr><td><xsl:value-of select="ws:CountryName"/></td></tr>
 </xsl:for-each>

 </table>
 </body>
 </html>
 </xsl:template>

 </xsl:stylesheet>
4

2 回答 2

0

XSLT 的纯 JS 实现也支持事件，例如Saxon-CE。可能想试一试。实际上，他们自己的文档是使用它实现的，并且完全符合您想要实现的目标，因此您可能想要研究它。

于 2014-03-30T07:05:31.073 回答
0

听起来您希望隐藏/显示文本链接到各自的国家。最好的方法是添加指向国家/地区值的链接，单击该链接时将运行一个 javascript 来切换隐藏/显示。
例如：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:ws="http://www.w3schools.com"
    version="1.0">
    <xsl:template match="/">
        <html>
            <head>
                <title>Trial country links</title>
                <script>
                    function hideShow(country){
                        if(document.getElementById(country).style.display == 'none'){
                            document.getElementById(country).style.display = 'block';
                        } else {
                            document.getElementById(country).style.display = 'none';
                        }
                    }
                </script>
            </head>
            <body>
                <table border="1">
                    <tr bgcolor="red">
                        <th>Country</th>
                        <th>Information</th>
                    </tr>
                    <xsl:for-each select="//ws:Categorie/ws:Countries/ws:Country">
                        <tr>
                            <td>
                                <xsl:element name="a">
                                    <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="ws:CountryName"/>')</xsl:attribute>
                                    <xsl:value-of select="ws:CountryName"/>
                                </xsl:element>
                            </td>
                            <td>
                                <xsl:element name="div">
                                    <xsl:attribute name="id"><xsl:value-of select="ws:CountryName"/></xsl:attribute>
                                    <xsl:attribute name="style">display:none;</xsl:attribute>
                                    <xsl:value-of select="ws:Information"/>
                                </xsl:element>
                            </td>
                        </tr>
                    </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

应用于以下输入 XML 时

<?xml version="1.0" encoding="UTF-8"?>
<ws:Categorie xmlns:ws="http://www.w3schools.com">
    <ws:Countries>
        <ws:Country>
            <ws:CountryName>Birma</ws:CountryName>
            <ws:Information>Birma blabla</ws:Information>
        </ws:Country>
        <ws:Country>
            <ws:CountryName>India</ws:CountryName>
            <ws:Information>India blabla</ws:Information>
        </ws:Country>
        <ws:Country>
            <ws:CountryName>Boerkina Faso</ws:CountryName>
            <ws:Information>Boerkina Faso blabla</ws:Information>
        </ws:Country>
        <ws:Country>
            <ws:CountryName>Namibia</ws:CountryName>
            <ws:Information>Namibia blabla</ws:Information>
        </ws:Country>
    </ws:Countries>
</ws:Categorie>

这给

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Trial country links</title>
        <script>
                    function hideShow(country){
                        if(document.getElementById(country).style.display == 'none'){
                            document.getElementById(country).style.display = 'block';
                        } else {
                            document.getElementById(country).style.display = 'none';
                        }
                    }
                </script>
    </head>
    <body>
        <table border="1">
            <tr bgcolor="red">
                <th>Country</th>
                <th>Information</th>
            </tr>
            <tr>
                <td><a href="javascript:hideShow('Birma')">Birma</a></td>
                <td>
                    <div id="Birma" style="display:none;">Birma blabla</div>
                </td>
            </tr>
            <tr>
                <td><a href="javascript:hideShow('India')">India</a></td>
                <td>
                    <div id="India" style="display:none;">India blabla</div>
                </td>
            </tr>
            <tr>
                <td><a href="javascript:hideShow('Boerkina Faso')">Boerkina Faso</a></td>
                <td>
                    <div id="Boerkina Faso" style="display:none;">Boerkina Faso blabla</div>
                </td>
            </tr>
            <tr>
                <td><a href="javascript:hideShow('Namibia')">Namibia</a></td>
                <td>
                    <div id="Namibia" style="display:none;">Namibia blabla</div>
                </td>
            </tr>
        </table>
    </body>
</html>
于 2012-04-22T10:59:37.917 回答