Question

我想使用jQuery在点击它时将我的超链接更改为粗体，并在单击另一个链接时将其切换回正常状态。我的网页上有以下链接：

<div id="navigation">
        <ul>
            <li id="home"><a  href="/index.html">Home</a></li>
            <li id="test"><a  href="/tests.html">Tests</a></li>
            <li id="job"><a  href="/jobs.html"> Jobs</a></li>

        </ul>
      </div>

具有以下样式：

#navigation { float:right; white-space:nowrap;}
#navigation ul{ list-style-type: none; line-height:14px; padding-top:20px; float:left; }
#navigation ul li{ float:left; display:inline; border-right:solid 1px #757171; padding-right:8px; margin-right:8px; }
#navigation ul li.last{ margin-right:0; border:0; padding-right:0; }
#navigation ul li a{ color:#fff; text-decoration: none;}
#navigation ul li a:hover,
#navigation ul li a.active { color:#00e0ff; }

如何将所选链接的样式更改为粗体和/或灰色？

Answer 1

表示链接点击（点击链接时应该是粗体或灰色）

没有必要为此参与jQuery。

:active伪类将在单击元素时选择元素（并且在聚焦时按下Enter键）。

a:active { color: #333; }

Answer 2

使用它：

$(function() {
   $('a.link').click(function() {
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });
});

小提琴：http://jsfiddle.net/bmK7q/1/

Answer 3

试试此代码

jQuery('#navigation a').on('click', function(){
  jQuery(this).addClass('active')
})

Answer 4

在你的情况下：

编辑：当然没有：选中，我的意思是：活跃

#navigation ul li a:active {
 font-weight: bold;
 color: #ccc;
}

如何使用jQuery更改链接的样式？

4 个答案: