[jquery] タブを設置し、タブをタップすると本文が切り替わる
タブを設置し、タブをタップすると本文を切り替える方法は以下の通り
jqueryとjavascriptを実装
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript"> $(function () { /*初期表示*/ $('.tabcontent').hide(); $('.tabcontent').eq(0).show(); $('.tabmenu li').eq(0).addClass('tabactive'); /*クリックイベント*/ $('.tabmenu li').each(function () { $(this).on('click', function () { var index = $('.tabmenu li').index(this); $('.tabmenu li').removeClass('tabactive'); $(this).addClass('tabactive'); $('.tabcontent').hide(); $('.tabcontent').eq(index).show(); }); }); }); </script>
HTML部分
<ul class="tabmenu clearfix"> <li class="tabactive">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <div class="tabcontent"> 本文1 </div> <div class="tabcontent"> 本文2 </div> <div class="tabcontent"> 本文3 </div> <div class="tabcontent"> 本文4 </div>
CSS部分
/*TOPのタブ*/ .tabmenu{ padding:0px; } .tabmenu li{ font-size:9px; width:24%; background:#333; float:left; list-style:none; padding:10px 0 10px; text-align:center; display:block; cursor: pointer; color:#FFF; } .tabactive, .hover { background:#999 !important; color: #000 !important; font-weight:bold !important; } .tabmenu li img:hover { opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )";} /*TOPのタブ*/