[JS]JavaScript無しでも動作するダイナミックなタブコンテンツ
Post on:2010年5月10日
sponsors
JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。
Dynamic Page / Replacing Content
デモページ
上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。
仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。
タブ箇所のHTMLは、下記のようになります。
HTML
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </textarea> |
各タブにはリンクが設定されており、オン時にはjQueryを利用してAJAXで表示するようにします。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<textarea name="code" class="js" cols="60" rows="5"> $(function() { var newHash = "", $mainContent = $("#main-content"), $pageWrap = $("#page-wrap"), baseHeight = 0, $el; $pageWrap.height($pageWrap.height()); baseHeight = $pageWrap.height() - $mainContent.height(); $("nav").delegate("a", "click", function() { window.location.hash = $(this).attr("href"); return false; }); $(window).bind('hashchange', function(){ newHash = window.location.hash.substring(1); if (newHash) { $mainContent .find("#guts") .fadeOut(200, function() { $mainContent.hide().load(newHash + " #guts", function() { $mainContent.fadeIn(200, function() { $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }); }); $("nav a").removeClass("current"); $("nav a[href="+newHash+"]").addClass("current"); }); }); }; }); $(window).trigger('hashchange'); }); </textarea> |
sponsors
