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

forked from: jQueryアニメーションのお題

gihyojp

2011-04-14 19:56:54

License: MIT License

Fork: 4

Fav: 0

View: 3817

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 21 lines
HTML 24 lines
CSS 40 lines

forked from: jQueryアニメーションのお題
jQuery v1.5.1

forked from: jQueryアニメーションのお題

// 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.slideUp(); $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/2CZc/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/gihyojp/lesson05-miss" title="forked from: jQueryアニメーションのお題">forked from: jQueryアニメーションのお題 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code