08 2月 2015

Javascriptのタブ切替

Posted in 制作メモ On 2月 8, 2015

tabmenu

新着記事とか人気記事をタブ切替でコンパクトにする。
こちらを利用しました。ありがとうございます。

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;
     }
Tags:,