簡単なタブによるコンテンツの表示切替を実装するコードです。
◆jQuery
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> |
◆HTML
1 2 3 4 5 6 7 8 9 10 |
<ul id="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <div class="content_wrap">内容1</div> <div class="content_wrap disnon">内容2</div> <div class="content_wrap disnon">内容3</div> <div class="content_wrap disnon">内容4</div> |
◆Javascript
1 2 3 4 5 6 7 8 9 |
$(function() { $("#tab li").click(function() { var num = $("#tab li").index(this); $(".content_wrap").addClass('disnon'); $(".content_wrap").eq(num).removeClass('disnon'); $("#tab li").removeClass('select'); $(this).addClass('select') }); }); |
参考:http://www.finefinefine.jp/jquery/kiji422/
コメント