08 2月 2015
Javascriptのタブ切替
新着記事とか人気記事をタブ切替でコンパクトにする。
こちらを利用しました。ありがとうございます。
JavaScript(JQuery読み込んだ後)
<script type="text/javascript"> // TABMENU $(function(){ $('.tabcontent').hide(); $('#tab a').click(function () { $('.tabcontent').hide().filter(this.hash).fadeIn(); $('#tab a').removeClass('active'); $(this).addClass('active'); return false; }).filter(':eq(0)').click(); }); </script>
タブのHTML
<ul id="tab" class="clearfix"> <li><a href="#tab01">TAB01</a></li> <li><a href="#tab02">TAB02</a></li> </ul> <div class="tabcontent" id="tab01"> <ul class="listmenu"> <li><a href="">○▽◇◇○▽◇◇</a></li> <li><a href="">○▽◇◇○▽◇◇</a></li> <li><a href="">○▽◇◇○▽◇◇</a></li> </ul> </div> <div class="tabcontent" id="tab02"> <ul class="listmenu"> <li><a href="">●▼■◆●▼■◆</a></li> <li><a href="">●▼■◆●▼■◆</a></li> <li><a href="">●▼■◆●▼■◆</a></li> </ul> </div>
こちらタブ部分のCSS
#tab{display:block;width:100%;clear:both;} #tab li{float:left;width:50%;} #tab li a{ display:block; background:#F2A449; padding:10px 5px; color:#FFF; margin:0 auto; text-align:center; } #tab li a:hover, #tab li a.active{ background:#F2F2F2; color:#333; }