Change language
Python.Engineering Wiki JavaScriptタブ

JavaScriptタブ

__main__ Python module | absolute | Bootstrap JavaScript library | code Python module | COM PHP module | Ctype PHP module | dis Python module | Ev PHP module | html Python module | iat | io Python module | JavaScript | jQuery JavaScript library | os Python module | parallel PHP module | pty Python module | Python Development | Python functions | Radius PHP module | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | time Python module | UI PHP module
Michael Zippo Michael Zippo

CSSタブは、ナビゲートしやすい1つの場所に関連情報を表示するのに最適です。それらは基本的に、レシピボックスやバインダーに表示されるタブ付きの仕切りのように見えます。ナビゲーションタブを使用するWebサイトの例：

これら2つのサイトを見て、サイトでのユーザーインターフェイスのそのようなコンポーネントの使用の利点について考えてください。どのような問題を解決する必要がありますか？ナビゲーションタブはどのような種類の情報が優れた開発作業になりますか？

テキストまたは情報を意味のあるコンポーネントに編成し、それらを画面に表示せずに画面に表示するユーザーインターフェイスのツリーに到達する必要がある場合スペースを取りすぎる場合は、ナビゲーションタブが賢明な選択です。 JavaScript、jQuery、および/またはBootstrapの使用を開始するにつれて、ナビゲーションタブについてさらに詳しく説明しますが、純粋なHTMLとCSSのみを必要とする正式な作業もあります。構成を見てみましょう：

HTMLコードを構成します：

プロジェクトのメインコンテナーとして機能する本体内のコンテナーを使用して、標準のHTMLを構成します。 。 class属性で好きな名前を付けることができますが、 class = "tabs"という名前を付けます。これまでのところ、HTMLコードは次のようになっているはずです。 DOCTYPE html>


" tabs "を挿入し、それぞれを tabクラスで呼び出します。これは、今日書く4枚のカードのそれぞれを表しています。エントリ、タブラベル、タブコンテンツが含まれます。これらすべての空のコンテナを作成しましょう：<！ DOCTYPE html>

< / html>

コンテンツクラス名の中には、コンテンツが含まれます。任意のコンテンツを使用できますが、関連するコンテンツをタブで使用するのが一般的な方法です

CSSを開始する時間：

CSSの作成に関しては、最大のコンテナーから始めて、ここで最小のコンテナーに向かって作業を進めることが、それを実行するために必要な最小限の作業です。作業：

  1. キャリブレーションボックスに汎用セレクターを設定します。 border-box
  2. メインコンテナでは、displayプロパティをflexに設定し、positionをrelativeに設定する必要があります。表示：フレックスを使用すると、カードを並べて配置できるため、相対位置は、マップのコンテンツを保持する境界またはフェンスとして機能します。

    3. この時点で、ボタンラジオといくつかのコンテンツを含む4つのテキストブロックのように見えるので、選択したブロックを表示し、他のブロックを非表示にする方法を見つける必要があります。


    1. .tabコンテナ、ラベルのスタイルを修正します：。
      1. 希望の色の1pxの実線の境界線
      2. パディング：5px、10px-ラベルテキストの周囲にスペースを追加します
      3. 10pxの境界線-半径、10px、0px、0px -これにより、ラベルが従来のカードのように見えます。

        4. 今すぐ作業を確認すると、ラベルに円形のラジオボタンが付いていることがわかります。彼らの左側に。したがって、従来のタブのように見えますが、ボタンの選択された属性を維持するには、ラジオボタンの円形部分を非表示にする必要があります。

        1. 実際にボタンを選択するには、 .tab [type=`radio`]を使用します。非表示にするには、比類のない表示を行います。

          2. したがって、実際のコンテンツにアプローチして、一度に1つのタブのみが表示されるようにする必要があります。

          1. divコンテンツを選択し、絶対位置をに設定します。絶対位置を設定すると、相対親にdivを設定できます。上、右、左、下を使用して、親divの任意の場所にコンテンツを設定できます。この場合、左右のプロパティを0に設定します。また、境界線を作成し、背景色を不透明な色に設定します。
            1. z-の調整選択したタブのインデックスにより、そのタブのパネルが前面に表示されます。これを行うには、選択したボタンとそのコンテンツを選択します。これを行うには、[type =`radio`]：checked〜label〜.contentを使用します。 CSSの要素間の「〜」は、選択したラジオボタンの後に発生するlabel要素の後に発生するコンテンツクラスが必要であることを示しています。
              1. アクティブなタブを表示するには、 set [type =`radio`]：チェック済み〜ラベルを別の背景色に設定します。

                2. これで、ユーザーが各タブをクリックすると、他のパネルのコンテンツを見なくてもタブを切り替えることができるはずです。 。これは、作業中のナビゲーションタブに最低限必要なものです。CSSで遊んでスタイルを変更してみてください。作業の試運転作業は上にコード化されています-下に：<！DOCTYPE html>