我正在编写一个 XSL 文件，其中包含带有链接列表的侧面导航菜单。当用户单击其中一个链接时，页面会跳转到该链接对应的信息表。如何才能使单击链接时突出显示该表的标题(而不是链接本身)？如果单击另一个链接，它也应该取消突出显示。
这是链接菜单:
<div onclick = "highlight(this);" onblur = "undoHighlight(this);">
<a href = "#{generate-id(.)}">
<xsl:value-of select = "."/> (<xsl:value-of select = "count(../n1:entry)"/>)
</a>
</div>
这是用于突出显示/undoHighlight 函数的 javascript:
function highlight(link)
{
undoHighlight(link)
link.style.background = "red";
}
function undoHighlight(link)
{
link.style.background = "white";
}
如有任何帮助，我们将不胜感激。提前致谢!
编辑:这是表格的通用模板
<!-- Component/Section -->
<xsl:template match="n1:component/n1:section">
<xsl:apply-templates select="n1:title"/>
<xsl:apply-templates select="n1:text"/>
<xsl:apply-templates select="n1:component/n1:section"/>
</xsl:template>
<!-- Title -->
<xsl:template match="n1:title">
<div id = "dataTitleStyle">
<a name="{generate-id(.)}"><xsl:value-of select="."/></a>
</div>
</xsl:template>
<!-- Text -->
<xsl:template match="n1:text">
<xsl:apply-templates />
</xsl:template>
最佳答案
我提供了一个使用 jquery 突出显示菜单的示例输出页面。
您必须更改 jquery 中的选择器，因为我现在不更改页面中的所有周围元素。希望这对您有所帮助或至少给您带来灵感;-)
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Add a click handler on in-page links
// You'd better provide another selector but I don't know the surrounding elements. I selected all a elements that contain a '#' inside a div.
$('div a[href*=#]').click(function() {
var theID = $(this).attr('href');
var targetElementName = theID.substring(theID.indexOf('#') + 1)
// "unhighlight" other elements
// Set bg of all datatitlestyle elements to blue
$('.dataTitleStyle > a[name]').parent().css('background','blue');
// highlight the element
// Set bg of clicked datatitlestyle element to red
$('.dataTitleStyle > a[name=' + targetElementName + ']').parent().css('background','red');
});
});
</script>
</head>
<body>
<!-- The menu -->
<div>
<a href="#this_is_the_id">
The output of xslt 1
</a>
<br />
<a href="#this_is_the_second_id">
The output of xslt 2
</a>
</div>
<!-- Content -->
<div class = "dataTitleStyle" style="background: blue;">
<a name="this_is_the_id">A title</a>
</div>
<div class = "dataTitleStyle" style="background: blue;">
<a name="this_is_the_second_id">A second title</a>
</div>
</body>
</html>
关于javascript - 如何突出显示点击链接的相应标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2724191/