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/ 我刚刚更改了

的点击方法

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

您应该确保该方法正在运行，并且该课程处于活动状态＆＃39;正在设定。

活动链接不改变颜色

2 个答案: