Question

I have a page with a lot of boxes which have inline html links inside of them so the user can get to them quickly. Here’s my question:

Is it possible with the use of jquery that when you click the link mysite.com/test/#box1 the respective box to change its style (example – add a red border around box1 so the user quickly sees it) or not? How could I accomplish something like this?

HTML:

<div class="box1">
  <a name="box1"></a>
  ...content1...
</div>
<div class="box2">
  <a name="box2"></a>
  ...content2...
</div>
<div class="box3">
  <a name="box3"></a>
  ...content3...
</div>

Answer 1

Try the following:

.border {
   border: 1px solid red;
}

$('a').click(function() {
   e.preventDefault()
   $(this).closest('div').addClass('border')
})

or:

$('a').click(function(e) {
   e.preventDefault();
   var h = document.location.hash.replace('#', '')
   $('.'+h).addClass('border')
})