[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">タブ１</li>
 <li>タブ２</li>
 <li>タブ３</li>
 <li>タブ４</li>
 </ul>
<div class="tabcontent">
本文１
</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のタブ*/