[JS]JavaScript無しでも動作するダイナミックなタブコンテンツ

JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。

デモのキャプチャ

Dynamic Page / Replacing Content
デモページ

上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。

仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。

タブ箇所のHTMLは、下記のようになります。

HTML

各タブにはリンクが設定されており、オン時にはjQueryを利用してAJAXで表示するようにします。

JavaScript

sponsors

top of page

©2018 coliss