【jQuery】シンプルなタブ切り替えの作り方 | Designmemo（デザインメモ）-初心者向けWebデザインTips-

jQueryを使って、タブでコンテンツ内容を切り替えて表示させる方法です。ここでは、複雑なことはしないで、jQueryとCSSを組み合わせて単純にコンテンツを切り替えるだけの動きについて見ていきます。 タブ切り替えの作り方 まずは、HTMLを以下のように組んでおきます。 <ul class="tab"> <li class="active"><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <div class="tabContents active" id="tab1"> ～コンテンツ内容～ </div> <div class="tabContents" id="tab2"> ～コンテンツ内容～ </div> <div class=

[perry-tips]

“.tabContents { display: none; } .tabContents.active { display: block; }”