Question

如果我有3个链接：

<a href="#link1">Somelink</a>
<a href="#link2">Somelink 2</a>
<a href="#link3">Somelink 3</a>

我希望能够这样做，以便在点击Somelink 2时，它会使链接变为粗体。如果用户单击“Somelink”，则该链接变为粗体，而其他链接不变为粗体。（如果单击Somelink 3，则相同）。怎么做？

Answer 1

jsBin demo

$('a').click(function(e){
   e.preventDefault();         // prevent default anchor behav.
   $(this).css({ fontWeight: 'bold' }).siblings().css({ fontWeight:'normal' });
});

<{1>} click使用方法this更改.siblings()的字体样式和定位兄弟姐妹，确保重置所有adiacent <a>元素。

无需提及上面的代码将针对所有a元素，仅作为示例。
而是像演示一样使用父元素作为选择器：

$('#myLinks a').click(function(e){

Answer 2

<强> HTML

<div id="mylinks">
  <a href="#link1">Somelink</a>
  <a href="#link2">Somelink 2</a>
  <a href="#link3">Somelink 3</a>
</div>

CSS

.highlight{     
 font-weight:bold;
}

<强>的jQuery

$(document).ready(function(){

$('#mylinks a').click(function(){
 $('#mylinks a').removeClass('highlight');
 $(this).addClass('highlight');
});

});

Answer 3

<强> HTML

<a href="#">some link 1</a>
<br>
<a href="#">some link 2</a>
<br>
<a href="#">some link 3</a>

<强> JS

$('a').click(function() { $(this).css({'font-weight':'bold'}) })

如何突出显示点击的链接？

3 个答案:

jsBin demo