Question

在链接活动状态我要替换a标签的内容，然后它应该继续关注链接。然而，当我按照小提琴和这里所示的方式设置它时：

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。

我使用JQuery创建了一个快速fiddle here（不需要jQuery，但它更容易）切换链接中的文本，然后在1秒之后转到新页面。这样，您只需要在HTML中使用原始链接，而不是使用CSS隐藏单独的链接。如果它不仅仅用于一个或两个链接，还有更灵活和可扩展的方法，但为了举例，请看一下小提琴。

这是jQuery：

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

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

活动状态和显示：none导致链接无法工作

1 个答案: