css - CSS - アンカー名でコンテンツを表示/非表示

Question

単一ページのウェブサイト

私は単一ページの Web サイトを持っています (1 ページのみ)。次のように、アンカー名を使用してページのさまざまな部分に移動するメニューを使用できます (サイドバーを参照)。

WordPress ドキュメント

他のものを隠す

現在アクティブなページ パーツに属さないものを非表示にして、見ているパーツの情報だけを表示したい。

質問

• 現在の #anchor_part の一部ではないものを CSS のみで非表示にすることはできますか?
• すでにこれを行っているサイトを見たことがありますか?

Answer 1

実施例

このHtmlを試してください

<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>

とCSS

#a, #b, #c{
    display:none;
}
#a:target{
    display:block;
}
#b:target{
    display:block;
}
#c:target{
    display:block;
}

Answer 2

はい、cssだけでこれを行うことができます。最初に特定の幅と高さで< div >を作成し、オーバーフローを非表示にしてから、このdivに物を並べて配置します

<a href="#firstWindow">firstWindow</a>
<a href="#secondWindow">secondWindow</a>
<a href="#thirdWindow">thirdWindow</a>
<div class="window">
    <div id="firstWindow" class="window">
         firstWindow
    </div>
    <div id="secondWindow" class="window">
         secondWindow
    </div>
    <div id="thirdWindow" class="window">
         thirdWindow
    </div>
</div>

.window{
   width:300px;
   height:300px;
   overflow:hidden;
 }

上記のようなもの; 高さが一定の場合、このhtml/cssを使用できることに注意してください。高さは同じでなければなりません。