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

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 演示

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

在使用确保重置所有 adiacent元素的方法click更改字体样式和定位兄弟姐妹时。this.siblings()<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

以下解决方案没有 JavasSript。

HTML 代码：

    <ul class="listNone">
                        <li class="inline">
                            <button name="planText2" type="button">The Studio</button> &nbsp;
                        </li>
                        <li class="inline">
                            <u> <button autofocus name="planText2" type="button">Deluxe Portion</button></u> &nbsp;
                        </li>
                        <li class="inline">
                            <button name="planText2" type="button">Penthouse</button> &nbsp;
                        </li>
                        <li class="inline">
                            <button name="planText2" type="button" >Top Garden</button> &nbsp;
                        </li>
                        <li style="display:inline">
                            <button name="planText2" type="button">Double Height</button> &nbsp;
                        </li>
                        <!--onclick="this.style.color='#3399ff';this.style['text-decoration']='underline'"-->
<!--onclick="window.location.href='about.html'"-->
                    </ul>
    
    

CSS：

    button[name="planText2"]{
        background: none; color: #5b5f66; border: none; padding-left: 18px; padding-right: 18px; padding-top: 5px; padding-bottom: 5px; font: inherit; cursor: pointer; outline: inherit;
    }
    button[name="planText2"]:visited {
        color: #3399ff;
        text-decoration: underline;
    }
    button[name="planText2"]:focus {
        color: #3399ff;
        text-decoration: underline;
    }
    button[name="planText2"]:active {
        color: #3399ff;
        text-decoration: underline;
    }

Answer 4

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