CSS3 :target and display:none issue in IE and FF

Question

我将制作一个单页网站，其中包含用于在多个 div 之间导航的选项卡，默认情况下为 display:none。我想使用 :target CSS3 选择器使它们在单击链接时可见。而且我还希望第一个 div 在页面加载时可见。为此，我使用

document.location.href = "#div1";   

标记:

<div id="nav">
<a href="#div1">div1</a>|
<a href="#div2">div2</a>|
<a href="#div3">div3</a>
</div>
<div id="div1"><h1>div1</h1><p>div1</p></div>
<div id="div2"><h1>div2</h1> <p>div2</p></div>
<div id="div3"><h1>div3</h1><p>div3</p></div>

CSS:

#div1, #div2, #div3
{
position: relative;
display: none;
background: #ff7;
width: 400px;
height: 400px;
}

#div1:target, #div2:target, #div3:target
{
display: block;
}

在 Chrome 中运行的完整示例 http://jsfiddle.net/zy9Pt/

在 Chrome 中一切正常，但是，一如既往，在 FF(页面加载时第一个 div 仍然不可见)和 IE(:target 选择器不工作，第一个 div 是在页面加载时也不可见)。我该如何解决？为什么脚本在 FF 中不起作用，它是 IE 中带有 :target 选择器的错误吗？

存储:在 IE9 或 Chrome 中运行以下命令:

    <script>
document.location.hash = "#div1";   
</script>
<style>
#div1, #div2, #div3
{
position: relative;
display: none;
background: #ff7;
    width: 400px;
    height: 400px;
}

#div1:target, #div2:target, #div3:target
{
display: block;
}
</style>
<div id="nav">
<a href="#div1">div1</a>|
<a href="#div2">div2</a>|
<a href="#div3">div3</a>
</div>
<div class="clear"></div>
<div id="div1"><h1>div1</h1><p>div1</p></div>
<div id="div2"><h1>div2</h1> <p>div2</p></div>
<div id="div3"><h1>div3</h1><p>div3</p></div>

然后尝试在 Firefox 中运行相同的程序。 #div1 在页面加载时不可见。如果刷新 - 它会出现。

Answer 1

确保您的浏览器支持使用以下 url css3test.com 的 :target 选择器.向下滚动到“选择器”部分，查看您的浏览器是否支持 :target。