活动链接不改变颜色答案

【问题标题】：Active link not changing color活动链接不改变颜色
【发布时间】：2015-05-08 15:23:55
【问题描述】：

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

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

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

【问题讨论】：

在这里工作正常：jsfiddle.net/seyenaz/q5xv9yqp
您是在其他地方处理默认行为，还是在单击链接时加载新页面？（我不知道"@Url.Action(...)" 解析为什么。）
我的猜测是你在其他地方有一个错误正在停止 js 执行，请检查开发者控制台是否有错误并提供更多信息。
试试改成$('#my-navigation a').on('click', function() { $(this).addClass('active'); });
@Mave 这不是什么新鲜事，在我的情况下也不能永久使用。

标签： javascript html css

【解决方案1】：

您包含的 jQuery 脚本在我这边工作得很好，所以我想说问题很可能是您在页面上链接的 jQuery 版本或在链接完全呈现之前加载的脚本.

尝试将您列出的脚本与这样的文档一起准备好：

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

也可以将第一行换成简写形式：

$(function() {

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

它只是暂时的，在点击的时候生效。例如： $('#my-navigation a').click(function () { $('#my-navigation a').addClass('active'); });点击时闪烁所有链接。