CSS3：目标和显示：IE和FF中无问题

我将创建一个单页站点，其中包含用于在多个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>

在Chrome中工作的完整示例

Chrome中的一切都很好，但与往常一样，FF（第一个div在页面加载时仍然不可见）和IE（目标选择器不起作用，第一个div在页面加载时也不可见）中存在一些问题。 我怎样才能解决这个问题？为什么脚本不能在FF中工作，并且它是IE中带有：target选择器的一个bug

StoR: 在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>

document.location.hash=“#div1”；
#第一组，第二组，第三组
{
位置：相对位置；
显示：无；
背景:#ff7；
宽度：400px；
高度：400px；
}
#第1部分：目标，#第2部分：目标，#第3部分：目标
{
显示：块；
}
|
|
div1div1

div2div2

div3div3

---

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

请确保您的浏览器使用以下url支持：目标选择器。向下滚动至选择器部分，查看浏览器是否支持：target。

7年前，这是一个多么愚蠢的问题！你永远不需要：导航的目标。只需使用JS框架/库。

似乎在Firefox 25.0.1中工作，您在使用哪个版本时遇到问题？在最新的FirFox 25.0.0中，FF和IE support:target都适用于此功能。@DruDro ie8不支持：target--以及您在哪个IE版本上测试此功能。。我在IE10、IE9中测试，它可以工作。是的，IE8不支持：target。我已经在所有浏览器（IE10、FF25、Chrome和safari 5.1.7）中进行了测试，它运行良好。FF呢？为什么FF页面加载时第一个div不可见#div1出现在地址字符串中，但div1不可见。您使用的Firefox版本是什么？如果您不知道在哪里查找该版本，请转到“帮助”菜单并单击“关于Firefox”。

    <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>