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

StackOverflow https://stackoverflow.com/questions/54237

  •  09-06-2019
  •  | 
  •  

Question

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.

Was it helpful?

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');
    });

OTHER TIPS

You can also use the target pseudo-class in CSS:

<html>
<head>

<style type="text/css">
div#test:target {
 background-color: yellow;
}
</style>

</head>
<body>

<p><b><a href="#test">Link</a></b></p>

<div id="test">
Target
</div>

</body>
</html>

Unfortunately the target pseudo class isn't supported by IE or Opera, so if you're looking for a universal solution here this might not be sufficient.

Use your favorite JS toolkit to add a "highlight" (or whatever) class to the item containing (or contained in) the anchor.

Something like:

jQuery(location.hash).addClass('highlight');

Of course, you'd need to call that onready or click if you want it triggered by other links on the page, and you'll want to have the .highlight class defined. You could also make your jQuery selector traverse up or down depending on the container you want highlighted.

I guess if you could store this information with JavaScript and cookies for the functionality of remembering the bookmarks and even add a splash of Ajax if you wanted to interact with a database.

CSS would only be able to do styling. You would have to give the bookmarked anchor a class found in your CSS file.

CSS also has the a:visited selector which is used for styling links found in the browser's history.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top