2

私の言いたいことを説明するのは難しいので、最初にこの jsfiddle を参照してください: http://jsfiddle.net/Gsggy/

ユーザーが 1 をクリックすると、div 番号 1 が表示されます。他のものと同じで、十分に単純です。

ただし、ユーザーが数字をクリックする前は、URL の # 値に依存しているため、div はありません。

www.jsfiddle.comなどの空のURLでそこにあるデフォルトのdivを設定するにはどうすればよいですか?誰かが数字をクリックしてwww.jsfiddle.com/#1にすると消えます

4

2 に答える 2

3

問題は、「他の誰かがターゲットである間に何かをする」という方法で要素を実際にターゲットにすることはできないということです。

ただし、このジレンマにはいくつかの回避策があります。1 つの解決策は、常にデフォルトのコンテンツを表示し、ターゲット要素を上に表示することです。

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/

于 2012-07-26T12:44:38.073 に答える
0

nth-of-type または last-of-type セレクターを使用し、最後にデフォルトの div を作成します。あなたの場合はうまくいくと思います

于 2012-07-26T12:27:06.313 に答える