CSSタブは、ナビゲートしやすい1つの場所に関連情報を表示するのに最適です。それらは基本的に、レシピボックスやバインダーに表示されるタブ付きの仕切りのように見えます。ナビゲーションタブを使用するWebサイトの例:
これら2つのサイトを見て、サイトでのユーザーインターフェイスのそのようなコンポーネントの使用の利点について考えてください。どのような問題を解決する必要がありますか?ナビゲーションタブはどのような種類の情報が優れた開発作業になりますか?
テキストまたは情報を意味のあるコンポーネントに編成し、それらを画面に表示せずに画面に表示するユーザーインターフェイスのツリーに到達する必要がある場合スペースを取りすぎる場合は、ナビゲーションタブが賢明な選択です。 JavaScript、jQuery、および/またはBootstrapの使用を開始するにつれて、ナビゲーションタブについてさらに詳しく説明しますが、純粋なHTMLとCSSのみを必要とする正式な作業もあります。構成を見てみましょう:
HTMLコードを構成します:
プロジェクトのメインコンテナーとして機能する本体内のコンテナーを使用して、標準のHTMLを構成します。 。 class属性で好きな名前を付けることができますが、 class = "tabs"
という名前を付けます。これまでのところ、HTMLコードは次のようになっているはずです。 DOCTYPE html>