AJAXでHTML5とCSS3プログラミング用のタブ付きインタフェースを構築する方法 - ダミー

ビデオ: Section 8 2025

HTML5とCSS3 Web開発の重要な技術は、AJAXでタブ付きインターフェイスを使用することです。これにより、一連のタブの1つを選択することにより、セグメントの内容を変更することができます。

タブ付きインターフェイスでは、一度に表示できる要素は1つだけですが、タブはすべて表示されます。タブ付きのインターフェイスは、タブ（アコーディオンの見出しとは異なります）が同じ場所にとどまるため、アコーディオンよりも少し予測可能です。

<！ - 1 - >

タブは色を変えて現在強調表示されているタブを表示し、状態を変更して（通常は色を変えて）、それらが上に乗っていることを示します。別のタブをクリックすると、ウィジェットのメインコンテンツ領域が対応するコンテンツに置き換えられます。

これは、ユーザーがタブをクリックすると起こります。

<！ - 2 - >

アコーディオンと同様に、タブの効果は非常に簡単に達成できます。コードを見てください：

$（init）;関数のinit（）{$（ "#tabs"）。タブ（）;}タブをクリックします。 html

タブのデモ

ブック1
ブック2
ブック3


ブックI - HTMLファウンデーションの作成
<！あなたのツールの選択

リストとテーブルによる情報の管理
リンクによる接続の作成
画像の追加
HTMLベースの作成フォームブックII - CSSでスタイルを設定する
世界を彩る
テキストをスタイルする
セレクタ、クラス、スタイル


枠線と背景

CSSのレベル
スタイリングリストとメニュー
代替配置を使用する
タブベースのインターフェースを構築するためのメカニズムは、次のものと非常に似ています。 accordions：
すべての適切なファイルを追加します。


ほとんどのjQuery UIエフェクトと同様に、jQuery、jQuery UI、およびテーマCSSファイルが必要です。また、テーマの背景画像のimagesディレクトリにアクセスする必要があります。

HTMLを正常に構築します。
とにかくうまく整理されたウェブページを構築しているなら、あなたはすでにかなり近いです。
すべてのタブ付きデータを含むdivを作成します。
これはjQueryの魔法を実行する要素です。

メインのコンテンツ領域を指定されたdivに配置します。

ページとして表示される各コンテンツは、記述的なIDを持つdivに配置する必要があります。これらの各divはタブdivに配置する必要があります。

コンテンツへのローカルリンクのリストを追加します。
リンクのメニューを作成します。これをタブ付きdivの一番上に置きます。各リンクはdivの1つにローカルリンクする必要があります。たとえば、インデックスは次のようになります。

Book 1
Book 2

Book 3
通常通りinit（）関数を構築します。

通常のjQueryテクニックを使用します。
メインのdivのtabs（）メソッドを呼び出します。

信じられないことに、1行のjQueryコードがすべての作業を行います。