2011.11.27

【JS】JavaScriptでのタブ式表示域

さて、ちょっと勉強が進んでタブ式表示を覚えました。

Yahooトップのニュース欄のジャンルをリンク無しで切り替えてるあれです。

よくニュース系のサイトで見かけますね。

下記は、今回勉強した事を少しだけ応用して、作ったデモページです。

(あ、IE対応皆無で思い切り崩れるけど、それはまた後日ということで…)

デモページ

仕組みは、JavaScriptでそれぞれのコンテンツ部分とタブ部分のz-indexを書き換えて、クリックしたタブの写真が一番手前に来るよう設定しているだけです。

詳しくはソースを見てもらえればと。

JavaScriptの動きとしてはcssの書き換えしかしてないので、きっとかなり初歩の操作なんだろうなぁ。ただ、このクリックしたらcss書き換えられるってだけでかなり表現の幅が広がったのも事実。

クリックをマウスオーバーに変えるのは簡単だからそっちをいじってくのも楽しそうだな!

ActionScript3.0の元になった言語ってだけあって非常に覚えやすいです。ASやってて良かった。

楽しくなってきたぞー!


記事のタグ一覧:

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事