html / cssの1ページのタブ（ページ）：ターゲット

1つのHTMLページで、スクリプト、リスト、およびテーブルを使用せずに、HTMLおよびCSSで複数のページまたはタブ（サブページを含む）を作成するオプションの1つを検討します。 ディーバのみ、ハードコアのみ。 小規模なポートフォリオおよびインターフェイス要素に適しています。 ピノキオは、連続して使用しないでください。

要点：







最新のブラウザは、ブロックが表示されている場合にのみコンテンツをダウンロードするため、コンテンツ（画像）をダウンロードするための松葉杖はキャンセルされます。

簡単に説明すると、ブロックへのリンクはそれを表示しますが、デフォルトでは表示されません（したがって、表示に戻ります：他を選択した場合はどれも表示されません）。 _none_が選択されている場合、デフォルトで表示されるため、最初のブロックを非表示にします。 実際、それだけです。 今実装。



HTML わかりやすくするために、ブロックを3つのページと1つのタブに分割します。

<!-- ,    --> <!--     ,    ( - ), ""     --> <div id="tab/one"></div> <div id="tab/two"></div> <div id="tab/three"></div> <div id="tab"> <!--       ,        ,         () --> <a href="#one">#one</a> <a href="#two">#two</a> <!--   ;      ,      -,       css --> <b><a href="#tab/one">#three</a></b> </div> <div id="two"> <a href="#one">#one</a> <b><a href="#two">#two</a></b> <a href="#tab/one">#three</a> </div> <div id="one"> <b><a href="#one">#one</a></b> <a href="#two">#two</a> <a href="#tab/one">#three</a> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マークアップに移りましょう。ここではすべてが突然非常にシンプルで（明白ではありません）、有効であり、非標準の改良はありません。

 div { display: none; } /*   -  */ div:target { display: block; } /*    */ /*  , ..  ,   */ div[id*=t]:target ~ #one { /*   ,  "t"  ,  #one  */ display: none; } /*       ,     "tab"         -#one */ div[id*=tab]:target ~ #three { /*  ,        */ display: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはさまざまな方法で実装できますが、私の意見では、ボタン、リスト、スクリプト、およびその他の異端を持つリンクを表すという形で歪みがなく、リンクはリンクであり、ブロックはブロックです。



codepenの実例