如何突出顯示點擊鏈接的相應標題？

我在寫一個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

如何突出顯示點擊鏈接的相應標題？

回答

相關問題