Latest web development tutorials

財団タブ

タブナビゲーションは別のコンテンツを表示することは非常に良いことができ、コンテンツを切り替えることができます。

タブを使用する<ul class="tabs" data-tab> -tab>各オプションの<LI>要素を作成して追加する.tab-title作成するクラスを。

ヒント：あなたは、現在選択されているアイテムを使用することができます.activeクラスを。

例

<ULクラス= "タブ"データ -tab>
<李クラス= "タブタイトルアクティブ"> <aのHREF = "#">ホーム</ A> </ LI>
<李クラス= "タブのタイトル "> <aのHREF = "#">メニュー1 </ A> </ LI>
<李クラス= "タブのタイトル "> <aのHREF = "#">メニュー2 </ A> </ LI>
<李クラス= "タブのタイトル "> <aのHREF = "#">メニュー3 </ A> </ LI>
</ UL>

»をお試しください

垂直タブ

垂直タブは使用.vertical種類：

例

<ULクラス= "タブ垂直」のデータタブ>

»をお試しください

タブ切り替え

あなたが設定]タブを変更したい場合は、<div>要素に加えて使用することができます.contentクラスを。 プラス各タブの一意のIDを、および（は、<a href = "＃1 MENU1が" ID = "メニュー1"オプションのコンテンツを開きます）リスト項目に接続します。 最後に、コンテンツのオプションのすべて<div>要素には、 <div>要素には、追加する.tabs-contentクラスを、財団JSを初期化します。

注.activeクラスは自動的に現在選択されているタブに追加されます。

例

<ULクラス= "タブ"データ -tab>
<李クラス= "タブタイトルアクティブ"> <aのHREF = "#home">ホーム</ A> </ LI>
<李クラス= "タブのタイトル "> <aのHREF = "# menu1">メニュー1 </ A> </ LI>
<李クラス= "タブのタイトル "> <aのHREF = "# menu2">メニュー2 </ A> </ LI>
<李クラス= "タブのタイトル "> <aのHREF = "# menu3">メニュー3 </ A> </ LI>
</ UL>
<DIV CLASS = "タブ・コンテンツ 」>
<DIVクラス= "コンテンツアクティブ」のid ="ホーム">
<H3> HOME </ H3>
心臓がここで、<P>ホームである.. </ P>
</ DIV>
<DIVクラス= "コンテンツ" ID = "メニュー1">
<H3>メニュー1 </ H3 >
<P>一部のテキスト、blabla < / P>
</ DIV>
<DIVクラス= "コンテンツ" ID = "MENU2">
<H3>メニュー2 </ H3 >
<P>他のいくつかのテキスト。< / P>
</ DIV>
<DIVクラス= "コンテンツ" ID = "MENU3">
<H3>メニュー3 </ H3 >
<P>最後のタブをクリックします。</ P>
</ DIV>
</ DIV>

<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>

»をお試しください

タブフェード

タブが有効にフェードインをカスタマイズするためにCSSを使用します。

例

.tabs-コンテンツ> .content.active {
-webkit-アニメーション：fadeEffect 1秒。
アニメーション：fadeEffect 1秒。
}

@ -webkit-キーフレームfadeEffect {
{不透明度：0;} から
{不透明度：1;} へ
}

@keyframes fadeEffect {
{不透明度：0;} から
{不透明度：1;} へ
}

»をお試しください