如何突出显示点击链接的相应标题？

我在写一个XSL文件，其中包含一个包含链接列表的side-nav菜单。当用户点击其中一个链接时，页面跳转到该链接的相应信息表。我该如何做到这一点，以便当点击链接时，该表的标题（而不是链接本身）被突出显示？它也应该取消突出显示是否点击了另一个链接。如何突出显示点击链接的相应标题？

这里是链接的菜单：

<div onclick = "highlight(this);" onblur = "undoHighlight(this);"> 
<a href = "#{generate-id(.)}"> 
<xsl:value-of select = "."/> (<xsl:value-of select = "count(../n1:entry)"/>) 
</a> 
</div>

这是JavaScript的亮点/ undoHighlight功能：

function highlight(link) 
{ 
    undoHighlight(link) 
    link.style.background = "red"; 
} 
function undoHighlight(link) 
{ 
    link.style.background = "white"; 
}

任何帮助，将不胜感激。提前致谢！

编辑：这里是我提供的使用jQuery突出到菜单样本输出页的表

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

来源

2010-04-27 danielle

你能给你提到的表的例子（无论是HTML，或用于构建他们XSLT？） – 2010-04-29 08:45:03

编辑，以显示表格布局（： – danielle 2010-05-09 21:44:17

的通用模板。

您必须更改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>

来源

2011-02-19 09:53:33 Yoeri

如何突出显示点击链接的相应标题？

回答

相关问题