jquery - 如何使用 html 内联链接更改 css 样式

Question

我有一个包含很多框的页面，这些框内有内联 html 链接，因此用户可以快速找到它们。这是我的问题:

是否可以使用 jquery，当您单击链接 mysite.com/test/#box1 时，相应的框会更改其样式(例如 - 在 box1 周围添加一个红色边框，以便用户快速看到它) ？我怎样才能完成这样的事情？

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

尝试以下操作:

.border {
   border: 1px solid red;
}

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

或:

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