Forked from: gihyojp's jQueryアニメーションのお題 diff(5) forked from: jQueryアニメーションのお題 gihyojp Follow 2011-04-14 19:59:59 License: MIT License Fork1 Fav0 View3731 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 23 lines HTML 24 lines CSS 40 lines forked from: jQueryアニメーションのお題 jQuery v1.5.1 // 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(function() { $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> forked from: jQueryアニメーションのお題 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; } // 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(function() { $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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/smJ0/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-ok" title="forked from: jQueryアニメーションのお題">forked from: jQueryアニメーションのお題 - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Forked sort new page view favorite forked forked from: forked from: jQue.. kazumeat 00 148views 24/24/40 forked from: forked from: jQue.. hasehase0218.. 00 150views 25/24/40