html - 事件状态和显示 :none causes link not to work

Question

考虑以下 fiddle :http://jsfiddle.net/GMA76/

在链接激活状态我想替换a标签的内容，那么应该继续跟随链接。但是，当我按照 fiddle 和此处所示设置样式时:

a div:first-child{
    display:block;
}
a div:last-child{
    display:none;
}
a:active div:first-child{
    display:none;
}
a:active div:last-child{
    display:block;
}

该链接在您第一次单击时不起作用。它只替换了内容，然后似乎重定向失败了。

我该如何解决？

Answer 1

浏览器不能很好地适应 :active 事件中的内容变化。即使它确实有效，纯 CSS 解决方案也可能意味着在新页面加载(或开始加载时出现白屏)之前用户甚至看不到内容的变化。我用 :after 伪选择器和 content 属性测试了很多，但这也不起作用。

没错。内容的更改应该仅使用像 Javascript 这样的语言来完成。这是一个逻辑问题，不在样式语言的范围之内。因此，我建议使用 Javascript。

我创建了一个快速 fiddle here使用带有 jQ​​uery 的 Javascript(不需要 jQuery，但它更容易)切换链接中的文本，然后在 1 秒后转到新页面。这样您只需要在 HTML 中拥有原始链接，而不是使用 CSS 隐藏单独的链接。如果不仅仅是为了一个或两个链接，而是为了举例，请查看 fiddle ，还有更灵活和可扩展的方法来执行此操作。

这是 jQuery:

$(".switch-link").click(function(){
    $(this).text("Test Two");
    var href = $(this).attr('href');
    setTimeout(function(){
        window.location = href
    }, 1000);
    return false;
});

1000 是文本更改和浏览器开始加载新页面之间的延迟，您可以根据需要更改它。