[JS]動的にタブコンテンツを生成するスクリプトのチュートリアル

ユーザーのアクションで、タブコンテンツを生成・削除するスクリプトのチュートリアルをJanko At Warp Speedから紹介します。

Dynamic tabs using jQuery - why and how to create it
デモページ

デモでは、「open tabs」の各リンクをクリックすると、指定されたタブコンテンツが生成され、各タブの「×」アイコンをクリックすると削除されます。

実装は、タブがリスト要素、コンテンツがdiv要素となっています。

スクリプトのベースにはjQueryが利用されており、数行のスクリプトを追加するだけとなっています。