タブメニュー

タブメニュー

【タブメニュー】URLに応じたコンテンツ表示

同一ページ内のタブ切り替えで、タブごとに「#tab01、#tab02、#tab03」をURLに付与します。タブごとに独自のURLを持つことで、URLに応じたコンテンツを表示することができます。

タブメニュー

【タブメニュー】コンテンツをカテゴリーごとにソートして表示【ajax:json編】

ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 コンテンツはajaxを利用してjsonファイル内のデータを読み込みます。

タブメニュー

【タブメニュー】コンテンツをカテゴリーごとにソートして表示【ajax:xml編】

ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 コンテンツはajaxを利用してxmlファイル内のデータを読み込みます。

タブメニュー

【タブメニュー】コンテンツをカテゴリーごとにソートして表示【filter編】

ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。 カテゴリーの判別はjQueryのfilterを利用します。

タブメニュー

【タブメニュー】コンテンツをカテゴリーごとにソートして表示【hasClass編】

ページ表示時は全てのカテゴリーの中から最新5件のコンテンツを、タブ切り替え時はカテゴリーごとにソートして、該当カテゴリーの最新5件のコンテンツをフェードインで表示します。
カテゴリーの判別はjQueryのhasClassを利用します。

タブメニュー

【タブメニュー】コンテンツをフェードインで表示

プラグインを使用せず、自作でレスポンシブのタブメニューを実装します。タブの切り替えでコンテンツをフェードインして表示する動作になります。

タイトルとURLをコピーしました