Is there a way to highlight the target of a bookmark? (www.site.com/page.htm#bookmark)?

Issue

I want to link to bookmark on a page (mysite.com/mypage.htm#bookmark) AND visually highlight the item that was bookmarked (maybe having a red border). Naturally, there would be multiple items bookmarked. So that if someone clicked on #bookmark2 then that other area would be highlighted).

I can see how to do that with .asp or .aspx but I’d like to do it more simply than that. I thought maybe there was a clever way to do it with CSS.

WHY I’m interested:
– I want to have our programs link to a shopping page that lists all the programs on it. I’m using a bookmark so they’re jumping to the particular program area (site.com/shoppingpage#Programx) but just to make it obvious I’d like to actually highlight the page being linked to.

Solution

In your css you need to define

a.highlight {border:1px solid red;}

or something similar

Then using jQuery,

$(document).ready ( function () { //Work as soon as the DOM is ready for parsing
    var id  = location.hash.substr(1); //Get the word after the hash from the url
    if (id) $('#'+id).addClass('highlight'); // add class highlight to element whose id is the word after the hash
});

To highlight the targets on mouse over also add:

$("a[href^='#']")
    .mouseover(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).addClass('highlight');
    })
    .mouseout(function() {
        var id  = $(this).attr('href').substr(1);
        $('#'+id).removeClass('highlight');
    });

Answered By – Pat

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0