听起来您希望隐藏/显示文本链接到各自的国家。最好的方法是添加指向国家/地区值的链接,单击该链接时将运行一个 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>