[jQuery] ものすごくシンプルなタブメニュー
- 公開日:2013/10/30
この記事は最終更新日から10年以上が経過しています。
タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。
Result
jQuery
$(function() { $(".tab li").click(function() { var num = $(".tab li").index(this); $(".tabContent").removeClass('active'); $(".tabContent").eq(num).addClass('active'); $(".tab li").removeClass('active'); $(this).addClass('active') }); });
css
ul.tab { list-style: none; } ul.tab li { float: left; margin-right: 10px; padding: 10px; background-color: #f2f2f2; color: #666; cursor: pointer; } ul.tab li:hover { color: #FF0000; } ul.tab li.active { background-color: #999; color: #fff; } div.tabContent { clear: both; border: 1px solid #ccc; padding: 20px; width: 300px; display: none; } div.active { display: block; }
HTML
<ul class="tab"> <li class="active">TAB 1</li> <li>TAB 2</li> <li>TAB 3</li> </ul> <div class="tabContent active">This is the content of TAB 1.</div> <div class="tabContent">This is the content of TAB 2.</div> <div class="tabContent">This is the content of TAB 3.</div>
サンプルではタブを3つとしましたが、この方法であれば何個でも増やせます。記述は変わりません。