ピュアCSSによる切り替え可能なタブ - Qiita

CSS3から :target セレクタが導入され、ターゲット（URL末尾の #hogehoge）のIDを持つ要素を選択できるようになりました。:targetセレクタを使うと、簡単なタブ切り替えが実装できます。 今回は次のようなタブを作りたいと思います。完成品はこちらから。ピュアCSSのみでタブの切り替えもできます。 タブの各アイテムは<nav>タグ内に存在し、各タブのリンク先は href='#******'で指定します。現在の状態はURLが持ちます。タブ内のコンテンツは、.content クラスが指定された <div> で記述し、各ターゲットに対応したIDをそれぞれの要素が持ちます。 <nav> <a href='#home'>Home</a> <a href='#about'>About</a> <a href='#members'>Members</a> <a href='#links

[kamekio]

“.content { display: none; } .content:target { display: block; }”