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

时间:2012-07-18 18:00:46

标签: jquery css

我有一个包含很多框的页面,其中包含内置的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>

2 个答案:

答案 0 :(得分:2)

尝试以下方法:

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

答案 1 :(得分:2)

你也可以通过css3完成!

<div id="boxDiv1">
    <a name="box1" href="#boxDiv1" >Test Link</a>
</div>

<style>
#boxDiv1:target { border:1px solid red; }
</style>

您也可以为锚点

执行此操作