-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

それぞれの国にリンクされたテキストを表示/非表示にしたいようです。これを行う最善の方法は、国の値へのリンクを追加することです。これをクリックすると、非表示/表示を切り替える 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 に答える