Question

很难解释我的意思，所以先看看这个jsfiddle：http://jsfiddle.net/Gsggy/

当用户点击1时，div编号1显示，与其他编号相同，足够简单。

但是，在用户点击某个数字之前，那里没有div，因为它依赖于URL中的＃值

如何设置默认div，其中包含空白网址，例如www.jsfiddle.com但是当有人点击一个数字并将其设为www.jsfiddle.com/#1

时消失

Answer 1

事情是，你无法真正地将某个元素作为某个元素的目标来告诉它＆＃34;在别人成为目标时做某事＆＃34;。

然而，这种困境有一些解决方法。一种解决方案是始终显示默认内容并显示上面的目标元素。

您可以使用以下事实：dom中稍后出现的元素通常呈现在较早出现的节点之上。因此，您可以使用例如负上边距或绝对定位元素来掩盖默认内容。

改进你的html结构：

<div class="default" id="z">0</div>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>

这个css确实有效：

.default {
    display: block;
    background: #eff;
}

div + div {
    margin-top: -102px;
}

div:target {
    background: #eef;
    display: block;
    position: relative;
}

这种特殊方法的缺点是您需要知道默认内容的确切尺寸。

看到这个小提琴：http://jsfiddle.net/Gsggy/4/

Answer 2

使用nth-of-type或者last-of-type选择器并在最后设置一个默认div我觉得它会适用于你的情况

仅当URL没有片段标识符时才显示div

2 个答案: