jQueryタブ切り替え
jQueryタブ切り替え。
簡単に実装できます。
jQuery
<script src="js/jquery-2.x.x.min.js"></script> <script> $(function() { $('.tab li').click(function() { var index = $('.tab li').index(this); $('.content').css('display','none'); $('.content').eq(index).css('display','block'); $('.tab li').removeClass('select'); $(this).addClass('select') }); }); </script>
HTML
<ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <div class="content"> <p>タブ1内容</p> </div> <div class="content hide"> <p>タブ2内容</p> </div> <div class="content hide"> <p>タブ3内容</p> </div> <div class="content hide"> <p>タブ4内容</p> </div>
CSS
.tab { overflow:hidden; } .tab li { background:#ccc; cursor:pointer; float:left; margin-right:1px; padding:5px 25px; } .tab li.select { background:#eee; } .content { background:#eee; padding:20px; } .hide { display:none; }