jQuery Sequential List

おしゃれなリスト実装サンプル。次のようなリストをjQueryを活用して簡単実装するサンプルです。



プレーンなリスト要素に、jQueryを使って、classを item1, item2のように自動付与していきます。



あらかじめ、 li.item1, li.item2 のようにして定義しておいたCSSを適用させて、実現されています。
JavaScript+CSSのテクニックとしては勿論使えるものですが、そもそものリストがカッコいいので再利用したいところですね。



丸いバッジ型もなかなかセンスがいいです。