活动链接未更改颜色

Question

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

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

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

Answer 1

您包括的jQuery脚本在我看来效果很好，所以我想说问题很可能与您在页面上链接的jQuery版本或在链接完全呈现之前加载的脚本有关。

尝试将列出的脚本与准备好的文档一起包围，如下所示：

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

也可以将第一行替换为速记版本：

$(function() {

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

Answer 2

您的代码应该可以工作，至少在这里可以工作： https : //jsfiddle.net/kvk1keds/我刚刚将click方法更改为

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

您应确保该方法正在运行，并且已设置“活动”类。