如何使用 jQuery 更改链接的样式？ [复制]答案

【问题标题】：How do I change a link's style using jQuery? [duplicate]如何使用 jQuery 更改链接的样式？ [复制]
【发布时间】：2014-06-06 07:59:45
【问题描述】：

我想使用 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; }

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

【问题讨论】：

“选中”是什么意思？您是指与您当前所在页面对应的链接吗？
选中表示链接点击（点击链接时应为粗体或灰色）
你的意思是你想知道 CSS 来格式化文本还是 jQuery 来在两个类之间切换？
是的............我想将选定的链接文本更改为粗体，并且只有在单击另一个链接后才会返回第一个状态

标签： jquery css

【解决方案1】：

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

没有必要为此使用 jQuery。

:active psuedo-class 将在元素被点击时选择元素（以及在它们获得焦点时按下 Enter 键）。

a:active { color: #333; }

【讨论】：

它只显示粗体点击并在点击返回到另一个链接之前返回相同...
它也不起作用
@Sush — 是的，这就是您所要求的。您说的是“点击时”而不是“访问链接指向的页面时”。
不，我想访问链接到的页面

【解决方案2】：

使用这个：

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

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

【讨论】：

【解决方案3】：

试试这个代码

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

【讨论】：

仅供参考：这出现在低质量帖子队列中，因为有人标记了它。你的答案似乎是合理的，所以我认为这是因为它是一个纯代码的答案。

【解决方案4】：

在你的情况下：

编辑：当然没有 :selected，我的意思是 :active

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

【讨论】：

我已编辑。我写了糟糕的代码；）。当然没有引号。我只是在js中。
CSS 中没有:selected 伪类。
当然是对的。早上太早了。我刚刚编辑过。
点击链接时，它显示为粗体并恢复到原始状态。我只想在点击另一个链接后将粗体恢复到初始状态