制作链接 :active答案

【问题标题】：Making links :active制作链接 :active
【发布时间】：2014-08-22 00:21:29
【问题描述】：

我想说，考虑在我的网站上的某些链接中添加属性 :active 是相当小的问题。我在使用 jquery 选项卡的地方编写了代码，其中内容通过#div 标签加载

例如，我单击菜单中的“主页”位置并将其连接到 div #home 等我想让活动链接加粗，但是当我使用

sidemenu li a:active { font-weight:bold; }

只有当我按住鼠标左键时才会出现粗体字。

有没有办法解决这个问题？

【问题讨论】：

您能否澄清一下，您的问题是什么？
所以你的意思是它链接到页面中的#section？
链接在“the time between the user presses the mouse button and releases it”期间为:active。您可以考虑使用一个类来指示当前选项卡。

标签： jquery html css

【解决方案1】：

您可能需要在li 中添加一个类以使其变为粗体。如果您使用 jQuery，您可以使用它来切换类。

http://jsfiddle.net/hawaiianchimp/my3p9bc0/1/

<li class="nav"><a id="home" href="#home">Home</a></li>
<li class="nac"><a id="other" href="#other">Other</a></li>

<script>
$("li").on('click', function(){
    $("li").removeClass("active");
    $(this).toggleClass("active");
});
</script>

CSS

.active {
font-weight: bold;
}

【讨论】：

【解决方案2】：

改用:visited：

.sidemenu li a:visited { font-weight:bold; }

编辑

要仅将活动选项卡设为粗体，您需要使用 JavaScript。这是一个例子：

HTML

<a href="#" class="tab">Tab 1</div>
<a href="#" class="tab">Tab 2</div>
<a href="#" class="tab">Tab 3</div>

JavaScript

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

CSS

.active {
    font-weight: bold;
}

这是example。

【讨论】：

我试过了，它对我的链接没有任何影响
我想知道sidemenu 是不是我听说过的new-fangled whizz-bang HTML9 elements 之一...
@JaredFarrish 我认为它的 HTML10
@GPJethro 一些 CSS 规则无法为 :visited 选择器设置。阅读：stackoverflow.com/a/8331950/1096470
这将使所有访问的链接变为粗体，但 OP 只希望正在查看的选项卡为粗体。

【解决方案3】：

杰思罗，

你说"bolded text only appears when I hold my left mouse button"。嗯，这就是:active 的预期功能，即鼠标按钮正在激活链接。对于其他鼠标事件，可以尝试以下伪类：

:hover，用于鼠标悬停
:focus，用于键盘焦点

希望有帮助！

【讨论】：