css-link-target

boxA
boxB
boxC
boxD
boxA
boxB
boxC
boxD
※ID指定要素に限る
css-link-target hi0a.com


  view source
  JavaScript
  
  CSS
  #targetNav{
  position:fixed;
  top:0;
  left:0;
  display:flex;
  width:100%;
  background-color:rgba(255,255,255,0.5);
}
#targetNav a{
  padding:4px 32px;
}


#boxParent > div{
  display:none;
}
#boxParent > div:target{
  margin-top:40px;
  padding:40px;
  display:block;
  height:400px;
  border:4px solid #000000;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-css/css-link-target/
  
  ABOUT
  
    hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    仕様変更、API廃止等、実験途中で動かないページもあります。