How can I highlight the corresponding titles of clicked links?_问答_开发者

How can I highlight the corresponding titles of clicked links?

开发者 https://www.devze.com 2022-12-28 21:58 出处：网络

I\'m writing an XSL file that contains a side-nav menu with a list of links. When the user clicks on one of the links, the page jumps to the corresponding table of information for that link. How can I

I'm writing an XSL file that contains a side-nav menu with a list of links. When the user clicks on one of the links, the page jumps to the corresponding table of information for that link. How can I make it so that when the link is clicked, the title of that table (not the link itself) is highlighted? It should also un-highlight if another link is clicked.

Here is the menu of links:

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

This is the javascript for the highlight/undoHighlight functions:

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

Any help would be appreciated. Thanks in advance!

Edit: here is the general template for the tables

<!-- Component/Section -->    
<xsl:template match="n1:component/n1:section">
    <xsl:apply-templates select="n1:title"/>
    <xsl:apply-templates select="n1:text"/>
    <xsl:apply-template开发者_如何学JAVAs 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>

I provided a sample output page using jquery to highlight to menus.

You'll have to change the selectors in jquery because I don't now all surrounding elements in your page. Hope this helps or at least gives you inspiration ;-)

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