隠すと表示NAVのリンクのコンテンツを使用せずに

私は仕事をしていたFreeCodeCamp's project , そして、私は新しいアイデアを探していましたが、単純なタスクを実行する必要があります:target における擬似クラスMDN docs , 正確にlightbox section

このセレクター
最初に知っておくべきことは:target 要素を選択するid そして、URLのハッシュは同じです、そして、あなたがその要素を指すリンクを訪問するとき、それは起こります.例えば
アンカータグでセクションをリンクするなら

<!-- the link -->
<a href="#changed_element">link</a>

<!-- the linked element -->
<section id="changed_element">
    the changed element
</section> 

では、ユーザーがリンクをクリックしてセクションのスタイルを変更しましょう:target セレクタ.

#changed_element:target{
    background-color: #000;
    color: #fff;
}

so this selector selects the visited elements

HMMMMので、このセレクターを使用して非表示にして要素を表示したい場合は、リンクをクリックした前後の表示を指定する必要があります
例

<!-- nav links -->
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
</ul>


<section id="home">
    home's content
</section>


<section id="about">
    about's content
</section>


<section id="services">
    services's content
</section>

/* the default display by hiding the elements  */

#home, #about, #services{
    display: none;
}

/* showing the element that has been clicked in the nav-linkd */

#home:target, #about:target, #services:target{
    display: block;
}

それで、ユーザーがリンクをクリックするならば..ブラウザはそのリンクの隠しコンテンツを表示します.そして、彼が他の要素をクリックした場合、前の要素が再び隠され、彼が対象とされないか、新しいリンクの内容が表示されます
あなたは、これがちょうど例であるスタイルを変えることができます.訪問できますthis website 彼がどのように1つのHTMLファイルで完全なウェブサイトを作ったかを見るために
これは私の最初の記事です.私の説明が悪かったら残念です.私はこの記事があなたにとって役に立つことを望みます、そして、あなたはそれが好きです

資源

MDNドキュメントlink

article about a image gallery using only css and :target element in hacks.mozilla

CSSトリックに関するセレクターの使用に関する記事link

my freecodecamp project