簡単なjQueryのタブ切替サンプル【複数版】 | latup - 熊本でホームページ制作をしている人のメモ

簡単なアコーディオン処理の記事に「CSSもjsも（タブの）数を増やしても変更しなくていい」サンプルが無いかとコメントが来ていたので考えてみた。 簡単なタブ切替処理のサンプル【複数のタブに対応】 以下、サンプルの解説。 今回もjQueryはGoogleからもらい、jQueryの処理は外部ファイルとしてまとめます。 全体は実際のサンプルページのHTMLソースを参考して下さい。 jQuery部分の処理は以下の通り。 $(document).ready(function(){ // 初期設定 // #nav直下の全li要素の中から最初のli要素に.selectを追加 $("#nav > li:first-child").addClass("select"); // #nav直下の全li要素にマウスオーバーしたらリンク要素に偽装 $("#nav > li").hover(function()