Question

目前我正在做一个项目，其中Iam创建一个涉及html，xsl，xml，css和javascript的网站。在我的网站中，我想隐藏一些信息并能够显示它。我想在我的XSL文件中创建一个按钮，以便扩展和折叠一些文本。该按钮出现但问题是xsl没有识别javascript链接，因此它不会展开/折叠。

到目前为止，我在xsl文件中尝试了以下代码：

示例：

<script type="text/javascript" src="bookjavascript.js"></script>

示例：

 <xsl:text disable-output-escaping="yes">&lt;script
 src="bookjavascript.js" language="Javascript"</xsl:text> <xsl:text
 disable-output-escaping="yes"> &gt;</xsl:text><xsl:text
 disable-output-escaping="yes">&lt;/script&gt;</xsl:text>

实施例

<script type="text/javascript">
//<![CDATA[
    //I have inserted the javascript function directly. 
//]]>
</script>

javascript文件

function expandCollapse(showHide) {

        var hideShowDiv = document.getElementById(showHide);
        var label = document.getElementById("expand");

        if (hideShowDiv.style.display == 'none') {
            label.innerHTML = label.innerHTML.replace("[+]", "[-]");
            hideShowDiv.style.display = 'block';            
        } else {
            label.innerHTML = label.innerHTML.replace("[-]", "[+]");
            hideShowDiv.style.display = 'none';

        }
    }

xsl文件

    <xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:x="http://localhost" exclude-result-prefixes="x" >

    <xsl:template match="/">
<html>
<head>



<script type="text/javascript" src="bookjavascript.js"></script>

<button onclick="expandCollapse('showHide');" id="expand">[+]Expand/Collapse</button>

<div id="showHide" style="display: none;">Javascript works</div>






<link rel="stylesheet" type="text/css" href="../css/stylexsl.css" />
</head>
<body style=" font-family:Calibri;font-size:12pt;background-color:#FFF">

            <xsl:for-each select="x:books/x:book">




        <table style="   width: 70%;  " >

        <tr>


          <td style="  width:4%" align="right" >
                <img src="{x:contributor/x:profileImage}" style="width:60px;height:60px; " />

            </td>

            <td style="  width:25%; border-left: 1px solid black" >
                <div style="font-size:7pt"><a >28 October 2014<br/> </a><xsl:value-of select="a"/></div>
                <div style="font-size:7pt"><a><br/> </a><xsl:value-of select="x:author"/></div>
            </td>



        </tr>

        <tr>

          <td>

          </td>


          <td style=" width:70%; box-shadow: 0 8px 6px -6px black; " colspan="2" >

            <h1  style="font-weight:bold; font-size:15px; text-decoration:underline"><xsl:value-of select="x:title"/></h1>

            <img src="{x:bookImage}" style="  height:400px;width:250px; border: 2px solid #045FB4; box-shadow: 10px 10px 5px #888888;" />

            <div class="info-wrapper">
            <input type="checkbox" id="showhide"/>
            <label for="showhide">
                    <div class="more">Show more</div>
                    <div>Show less</div>
            </label>
            <div class="info"><xsl:value-of select="x:description"/></div>
            </div>




            <xsl:element name="a"><xsl:attribute name="href" ><xsl:value-of select="x:readmore" /></xsl:attribute>
            <span style="letter-spacing: 5px; font-size: 7px; ">READ MORE</span></xsl:element>





          </td>

        </tr>

        <tr><td height="40px"></td></tr>


    </table>









          </xsl:for-each>



           </body>
    </html>

    </xsl:template>

</xsl:stylesheet>

如何将外部Javascript文件链接到XSL？

0 个答案: