Forked from: gihyojp's jQueryアニメーションのお題 diff(3)

forked from: jQueryアニメーションのお題 | 第4回　jQueryでアニメーション

vent-0819

2011-04-13 12:03:53

License: MIT License

Fork: 4

Fav: 0

View: 4077

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 21 lines
HTML 24 lines
CSS 40 lines

第4回　jQueryでアニメーション（お題編）
http://gihyo.jp/design/serial/01/jsdoit/0004?page=4
でのお題の作成。

あとでまた手を加えるかもです

forked from: jQueryアニメーションのお題 | 第4回　jQueryでアニメーション
jQuery v1.5.1

forked from: jQueryアニメーションのお題 | 第4回　jQueryでアニメーション

第4回　jQueryでアニメーション（お題編） http://gihyo.jp/design/serial/01/jsdoit/0004?page=4 でのお題の作成。あとでまた手を加えるかもです// forked from gihyojp's "jQueryアニメーションのお題" http://jsdo.it/gihyojp/lesson04_work var $tabs = $('.tab'); var $contents = $('.content'); function changeTab(tabId) { var $currentPage = $contents.filter(':visible'); var $targetPage = $contents.filter('#content' + tabId); // コンテンツの切り替え（ここをアニメーションさせてください） $currentPage.fadeOut("fast"); $targetPage.slideDown(); // カレントのタブ変更 $tabs.removeClass('current'); $tabs.filter('#tab' + tabId).addClass('current'); } $tabs.click(function() { changeTab($(this).attr('id').slice(3)); }); <div class='tabs'> <div class='tab current' id='tab1'>tab1</div> <div class='tab' id='tab2'>tab2</div> <div class='tab' id='tab3'>tab3</div> </div> <div class='content' id='content1'> <div class='inner'> content1 </div> </div> <div class='content' id='content2'> <div class='inner'> content2 </div> </div> <div class='content' id='content3'> <div class='inner'> content3 </div> </div> body { margin: 0; padding: 20px; font-family: sans-serif; } .tabs { } .tab { display: inline-block; padding: 10px 30px; border: 1px solid #333; border-bottom: none; border-radius: 15px 10px 0 0; margin: 0 5px; cursor: pointer; } .tab.current { background: #90bfff; } .content { display: none; position: absolute; width: 400px; height: 300px; border: 1px solid #333; } #content1 { display: block; } .content .inner { padding: 20px; font-size: 35px; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/2vxO/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/vent-0819/2vxO" title="forked from: jQueryアニメーションのお題 | 第4回　jQueryでアニメーション">forked from: jQueryアニメーションのお題 | 第4回　jQueryでアニメーション - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code