機能的で格安なページ制作

jQueryでタブ切替

今回はjQueryを使ってのスクリプトです

前回のタブ切替とは違い今回は、jQueryを使ってタブの切替するスクリプトを作ってみました。

tab
見た目は前回とあまり変わりませんがよりスムースで面白い切替になりました
このサイトの切替もこの方式に変更しました。

ますワードプレス用のスクリプトのソースはこちら

表示切替時のエフェクトは、DEMOでは1秒フェードインに作ってますが、
7行目の.fadeIn()の部分を.slideDown()に変更する事でスライド表示になります。

CSSは、少し長いですが下のDEMO用に作ってます

HTMLソースです、タブとコンテンツは上から順番に自動認識します。

 

 


DEMO

タブ1
タブ2
タブ3
タブ4

DENO用のタブです。
・jQueryを使用したタブのDEMOを作ってみました。
・DEMOですのでここのコンテンツ内容は気にしないように・・・
・コンテンツ中身意外は上記のソースそのままでのDEMOです。 totoro
シンデレラ~~~

ライムちゃんS+650のLV80ステータス
ライムステータス
ライムちゃんS+650のLV80の特技と特性
ライム特技・特性


No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スマートフォン

このサイトはレスポンシブルです、
画面幅によりレイアウト最適化します、
スマホサイズで見てみよう!

上のQRコードをスマホでスキャン
又はタップしてメールで送れます

 
 

財成神社






このブログパーツの貼り付けコードはこちら
無料ですので是非使ってください。

お勧めサーバー

Amazonでお買物