活动链接未更改颜色

Active link not changing color

本文关键字：颜色 链接 活动      更新时间：2023-09-26

我的导航链接在布局页面中，它们看起来像：

<h3 id="my-navigation">
   <a href="@Url.Action("Questions", "Question")">ANKETA</a>
   <a href="@Url.Action("Statistics","Administrator")">STATISTIKA</a>
   ...
</h3>

我需要活动链接来更改颜色。CSS实现这一点：

#my-navigation a.active {
    text-decoration:none;
    color:#E0EBEB;
}

由于在所有html页面中都没有导航链接，只是在布局中，我尝试了使用javascript:

$('#my-navigation a').click(function () {
    $('#my-navigation a').removeClass('active');
    $(this).addClass('active');
});

为什么不起作用？

编辑：我意识到这只是暂时的（点击时）效果。例如：

$(document).ready(function () {
    $('#my-navigation a').click(function () {
        $('#my-navigation a').addClass('active');
    });
});

单击时闪烁所有链接。那么，该怎么办呢？

您所包含的jQuery脚本在我这边运行得很好，所以我认为问题很可能是您在页面上链接的jQuery版本，或者是在链接完全呈现之前加载的脚本。

试着用这样的文档围绕你列出的脚本：

$(document).ready(function() {
    $('#my-navigation a').click(function () {
        $('#my-navigation a').removeClass('active');
        $(this).addClass('active');
    });
});

将第一行替换为简写版本也是可以接受的：

$(function() {

这将确保在将点击触发器分配给链接之前，页面的内容已完全加载，因为链接必须在定义之前存在。

您的代码应该可以工作，至少在这里可以工作：https://jsfiddle.net/kvk1keds/我刚刚更改了的点击方式

$('#my-navigation a').on('click', function (ev) {});

您应该确保该方法正在运行，并且正在设置类"active"。

相关文章：