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.
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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With