Javascript 如何突出显示已单击链接的相应标题？_Javascript_Xml_Xslt

Javascript 如何突出显示已单击链接的相应标题？

javascript xml xslt

Javascript 如何突出显示已单击链接的相应标题？,javascript,xml,xslt,Javascript,Xml,Xslt,我正在编写一个XSL文件，其中包含一个带有链接列表的侧导航菜单。当用户单击其中一个链接时，页面跳转到该链接的相应信息表。我如何使其在单击链接时突出显示该表的标题（而不是链接本身）？如果单击了另一个链接，它也应该取消高亮显示以下是链接菜单： <div onclick = "highlight(this);" onblur = "undoHighlight(this);"> <a href = "#{generate-id(.)}"> <xsl:value-of se

我正在编写一个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>

任何帮助都将不胜感激。提前谢谢

编辑：这是表格的通用模板

<!-- 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中的选择器，因为我现在不知道页面中所有周围的元素。希望这对你有所帮助，或者至少给你灵感；-）


$（文档）.ready（函数（）{
//在页面链接中添加单击处理程序
//您最好提供另一个选择器，但我不知道周围的元素。我选择了在div中包含“#”的所有元素。
$（'div a[href*=#]'）。单击（函数（）{
var theID=$（this.attr（'href'）；
var targetElementName=theID.substring（theID.indexOf（“#”）+1）
//“不高光”其他元素
//将所有datatitlestyle元素的背景设置为蓝色
$（'.dataTitleStyle>a[name]'）.parent（）.css（'background'，'blue'）；
//突出显示元素
//将单击的datatitlestyle元素的背景设置为红色
$（'.dataTitleStyle>a[name='+targetElementName+']'））.parent（）.css（'background'，'red'）；
});
});


头衔
第二个头衔

您能否给出一个您所引用的表的示例（HTML或用于构建它们的XSLT？）编辑以显示表布局（：

<!-- 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>

<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>