1

The title may not be clear but what I want to achive is

We use goto kind of linking in HTML A tag like : <a href="#cite_note-17">1</a>

which may point to some <li id=cite_note-17>notes here</li>

What I want is , as soon as they are sent to that part, the concerned LI should be highlighted dynamically.

5 Answers 5

1

While its not yet supported in all browsers the new CSS pseudo class :target will enable that functionality. http://www.w3.org/TR/css3-selectors/

0

Have you tried this jquery plugin :

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

1
  • That's for search term highlighting, rather than targeting.
    – bobince
    Feb 12, 2010 at 18:26
0

I guess you could use jQuery and let it add a class to that particular

  • whenever the link is clicked.

    0

    The concept is you will have to run some JavaScript to get this to display correctly. I would recommend adding an onclick event to your anchor elements and pass the ID of the section to a function. Something like:

    <a href="#" onclick="goTo('cite_note-17'); return false;">1</a>
    

    And then define the function as:

    function goTo(sectionId)
    {
     document.location.href = "#" + sectionId;
     document.getElementById(sectionId).style.backgroundColor = "blue";
    
    }
    

    You'd probably want some a little more complex (to remove the formatting after a few seconds or something like that), but this hopefully will get you close.

    0

    Until the :target selector described by Thorn is well-supported, you'll need some script to do it. Here's an example:

    <style type="text/css">
        .target { color: red; }
    </style>
    
    <a href="#foo">link</a>
    <a href="#bar">link</a>
    <a name="foo">target (name)</a>
    <span id="bar">target (id)</span>
    
    <script type="text/javascript">
        (function() {
            // Monitor the #fragment part of the window's URL and reflect this
            // in which element has the `target` class.
            //
            var target= '';
            function updateTarget() {
                var hash= location.hash.slice(1);
                if (hash!==target) {
    
                    // Remove `target` class from old target (if any)
                    //
                    if (target!=='') {
                        var el= document.getElementById(target) || document.anchors[target];
                        if (el)
                            el.className= el.className.replace(/(^|\s)target(\s|$)/, '$1');
                    }
    
                    target= hash;
    
                    // Add `target` class to new target (if any)
                    //
                    if (target!=='') {
                        var el= document.getElementById(target) || document.anchors[target];
                        if (el && !el.className.match(/(^|\s)target(\s|$)/))
                            el.className+= ' target';
                    }
                }
            }
    
            setInterval(updateTarget, 100);
        })();
    </script>
    

    This works by polling for changes on the location's fragment part, so that it can cope with the fragment being changed by user navigation, forms, or scripting. It would have to be executed at the bottom of the page or on a page-load/ready event to ensure the target existed when it was first called.

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.