このガイドでは、CSS と JavaScript を使用してタブを作成する方法を説明します。
CSS と JavaScript を使用してタブを作成するには?
このセクションでは、CSS と JavaScript を使用してタブを作成するための手順を段階的に説明します。
ステップ 1: HTML を使用してタブ構造を作成する
まず、HTML タブ構造を作成する HTML コードを見てください。
< ディビジョンID = 「タブ1」 クリック時 = '初め（）' > 家 ディビジョン >
< ディビジョンID = 「タブ2」 クリック時 = '2番目（）;' > について ディビジョン >
< ディビジョンID = 「タブ3」 クリック時 = '三番目（）;' > お問い合わせ ディビジョン >
< br />
< ディビジョンID = 「続き1」 > Linuxhint へようこそ ！ ディビジョン >
< ディビジョンID = 「続き2」 > 技術教育
私たちは、Linux、プログラミング、コンピューター サイエンスなどの学習に役立つ多くの製品を構築してきました。
ディビジョン >
< ディビジョンID = 「続き3」 >
linuxhint DOT com のエディターから私たちのチームにお問い合わせいただけます。
ディビジョン >
上記のコード行では次のようになります。
- ” ” タグは、ID が「tab1」で、添付された「」の div 要素を追加します。 クリック時 リンクされた「」を実行する「イベント」 初め（） 」をクリックすると機能します。この要素は HTML タブとして機能します。
- 上記のメソッドは、次の 2 つの div 要素に対して実行されます。
- ”
”タグは改行を追加します。- ”
”タグは、割り当てられたID「cont1」を持つdiv要素を再度挿入します。この要素は、ブロック内に作成されたタブのコンテンツを表示します。- 次の二つは「
” タグは、割り当てられた ID を持つ div 要素も追加します。
ステップ 2: CSS を使用してタブのスタイルを設定する次に、CSS スタイル プロパティを適用して、選択に従ってタブとそのコンテンツをカスタマイズします。
< スタイル >
#タブ1、#タブ2、#タブ3 {
浮く : 左 ;
パディング : 5ピクセル10ピクセル5ピクセル10ピクセル ;
背景 : オレンジレッド ;
色 : #FFFFFF ;
マージン : 0ピクセル 5ピクセル 0ピクセル 5ピクセル ;
カーソル : ポインタ ;
国境 - 半径 : 3ピクセル ;
}
#タブ1 : ホバー、#tab2 : ホバー、#tab3 : ホバリング {
背景 : 緑 ;
}
#cont1、#cont2、#cont3 {
幅 : 300ピクセル ;
身長 : 100ピクセル ;
パディング : 40ピクセル ;
フォント - サイズ : 中くらい ;
フォント - 家族 : 「タイムズ・ニューローマン」 、タイムズ、セリフ ;
国境 : 2px ソリッドオレンジレッド ;
国境 - 半径 : 7ピクセル ;
画面 : なし ;
}
スタイル >記載されたコード スニペットでは次のようになります。
- まずは「」にアクセスしてください。 タブ 」に割り当てられた ID を使用し、次のスタイル プロパティ (float、padding、background、color、margin: 0px 5px 0px 5px、cursor、border-radius) を使用してカスタマイズします。
- 次に「」を添付します。 ホバリング 」イベント ハンドラーにタブを追加し、ユーザーがマウスをタブの上に置いたときに背景色を変更します。
- その後、「 タブのコンテンツ ”は、idが「cont1」、「cont2」、「cont3」のdiv要素に格納されています。ここで、次のスタイル プロパティ (幅、高さ、パディング、フォント サイズ、フォント ファミリー、境界線、境界線の半径、表示) を適用します。
ステップ 3: JavaScript を使用してタブに機能を追加する最後に、JavaScript を使用して、作成したタブに機能を追加します。
< 脚本 >
最初に機能する ( ） {
書類。 getElementById ( 「続き1」 ） 。 スタイル 。 画面 = 'ブロック' ;
書類。 getElementById ( 「続き2」 ） 。 スタイル 。 画面 = 'なし' ;
書類。 getElementById ( 「続き3」 ） 。 スタイル 。 画面 = 'なし' ;
}
関数秒 ( ） {
書類。 getElementById ( 「続き2」 ） 。 スタイル 。 画面 = 'ブロック' ;
書類。 getElementById ( 「続き1」 ） 。 スタイル 。 画面 = 'なし' ;
書類。 getElementById ( 「続き3」 ） 。 スタイル 。 画面 = 'なし' ;
}
関数 3 ( ） {
書類。 getElementById ( 「続き3」 ） 。 スタイル 。 画面 = 'ブロック' ;
書類。 getElementById ( 「続き1」 ） 。 スタイル 。 画面 = 'なし' ;
書類。 getElementById ( 「続き2」 ） 。 スタイル 。 画面 = 'なし'
}
脚本 >上記のコード行は次のとおりです。
- 「」という名前の関数を定義します。 初め ”。
- この関数定義では、「 document.getElementById() 」メソッドは、IDが「cont1」のdiv要素にアクセスし、「 スタイル ” のプロパティ ブロック 」の価値があります。このプロパティは、ユーザーがクリックしたタブのコンテンツを表示します。
- 次に、「document.getElementById()」は別の div にアクセスし、「none」値を持つ「style」プロパティを適用して非表示にします。 Web ページ上のその要素が非表示になります。
- 上記のメソッドは、次にアクセスされる div 要素に対して実行されます。これは、「first」関数は、「style」プロパティの値が「block」であるタブのコンテンツのみを表示し、その他は非表示にするためです。
- 次の「ｓｅｃｏｎｄ（）」および「ｔｈｉｒｄ（）」関数についても上記の手順が実行される。
出力
タブが正常に作成され、ユーザーがクリックするとそれぞれのコンテンツが表示されることがわかります。
結論
タブを作成するには、まず「HTML」を使用してタブの構造を構築し、次に CSS スタイル プロパティを使用してタブをカスタマイズします。スタイル プロパティは、追加のスタイル シートをエクスポートせずに追加されます。これらのプロパティにより、タブが魅力的で人目を引くものになります。タブを作成してカスタマイズしたら、JavaScript プログラミング言語を使用してタブに機能を追加します。このガイドでは、CSS と JavaScript を使用してタブを作成する完全な手順を実際に説明しました。