Question

我即将制作一个单页网站，其中包含用于在多个div之间导航的选项卡，默认情况下显示为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中（目标选择器不起作用，第一个div是在页面加载时也不可见）。我该如何解决这个问题？为什么脚本不能在FF中运行，这是IE中使用：target选择器的错误吗？

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>

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

Answer 1

使用以下网址css3test.com确保您的浏览器支持：target选择器。向下滚动到选择器部分，查找是否：您的浏览器是否支持目标。

Answer 2

7年前这么愚蠢的问题！您永远不需要：target进行导航。只需使用JS框架/库。

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

2 个答案: