我看到两个选项：
- 让 XSLT 创建一个大 HTML 并隐藏除您要显示的部分之外的所有部分。
- 使用 JavaScript 启动不同的转换，将当前 HTML 的正文替换为转换返回的 HTML 正文。您可以使用一个样式表，根据需要为每个转换提供的
<xsl:parameter> 的值采用不同的路径，或者使用不同的样式表。
假设您有以下 XML（我们称之为 text.xml）：
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<myXml>
<chapter id="c1">
<heading>Heading 1</heading>
<content>This is text of chapter one.</content>
</chapter>
<chapter id="c2">
<heading>Heading 2</heading>
<content>This is text of chapter two.</content>
</chapter>
</myXml>
那么，对于建议 1，您可以这样做：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<title></title>
<script type="text/javascript">
function showView(id) {
document.getElementById("dynamicStyle").innerHTML = "#" + id + "{display:inline}";
}
</script>
<style type="text/css">
.view {display:none};
</style>
<style type="text/css" id="dynamicStyle">
#overview{display:inline}
</style>
</head>
<body>
<div class="view overview" id="overview">
<h1>Overview</h1>
<xsl:apply-templates select="myXml/chapter" mode="overview"/>
</div>
<xsl:apply-templates select="myXml/chapter" mode="detail"/>
</body>
</html>
</xsl:template>
<xsl:template match="chapter" mode="overview">
<div><a href="javascript:showView('{@id}')"><xsl:value-of select="heading"/></a></div>
</xsl:template>
<xsl:template match="chapter" mode="detail">
<div class="view detail" id="{@id}">
<div><a href="javascript:showView('overview')">Back to overview</a></div>
<xsl:apply-templates mode="detail"/>
</div>
</xsl:template>
<xsl:template match="heading" mode="detail">
<h1><xsl:value-of select="."/></h1>
</xsl:template>
<xsl:template match="content" mode="detail">
<div><xsl:value-of select="."/></div>
</xsl:template>
</xsl:stylesheet>
关键是为每个视图创建单独的 div，并通过让 JavaScript 更改 CSS 在它们之间切换。
方法 2 可能如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:param name="view" select="'overview'"/>
<xsl:template match="/">
<html>
<head>
<title></title>
<script type="text/javascript">
function showView(id) {
document.documentElement.replaceChild(transform(id).body, document.body);
}
function loadXML(fileName,mime) {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("GET",fileName,false);
if(mime) xmlHttpRequest.overrideMimeType(mime);
xmlHttpRequest.send("");
return xmlHttpRequest.responseXML;
}
function transform(view) {
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(loadXML('test.xsl','application/xslt+xml'));
xsltProcessor.setParameter(null,'view',view);
return xsltProcessor.transformToDocument(loadXML('test.xml'),document);
}
</script>
</head>
<body>
<xsl:choose>
<xsl:when test="$view = 'overview'">
<div>
<h1>Overview</h1>
<xsl:apply-templates select="myXml/chapter" mode="overview"/>
</div>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="myXml/chapter[@id = $view]" mode="detail"/>
</xsl:otherwise>
</xsl:choose>
</body>
</html>
</xsl:template>
<xsl:template match="chapter" mode="overview">
<div><a href="javascript:showView('{@id}')"><xsl:value-of select="heading"/></a></div>
</xsl:template>
<xsl:template match="chapter" mode="detail">
<div>
<div><a href="javascript:showView('overview')">Back to overview</a></div>
<xsl:apply-templates mode="detail"/>
</div>
</xsl:template>
<xsl:template match="heading" mode="detail">
<h1><xsl:value-of select="."/></h1>
</xsl:template>
<xsl:template match="content" mode="detail">
<div><xsl:value-of select="."/></div>
</xsl:template>
</xsl:stylesheet>
这里的关键是使用 JavaScript 加载样式表和 XML，并使用 JavaScript 对象XSLTProcessor 进行转换，然后替换文档的正文。在此示例中，我使用了一个具有不同参数的样式表，但您也可以加载不同的样式表。您必须相应地调整 transform() 函数，将 test.xsl 替换为需要以某种方式提供的变量。