大阪市西区　Wild Cards ワイルドカーズ

当サイトでもサイドバーで使用しているタブメニューを簡素化したものが以下ソースです。



以前CSSだけのタブメニューを試したんですが思うような挙動にならなかったので、軽くフェードもしてくれるjQuery版を実装してみました。コード本体も短いので負荷も少なくてサクサクいい感じ。

1.まずはjQuery本体をhead内に設置

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"/></script>

2.タブ機能を付与するプラグインをhead内に設置

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $('.tab_area:first').show();
        $('.tab li:first').addClass('active');
  
        $('.tab li').click(function() {
            $('.tab li').removeClass('active');
            $(this).addClass('active');
            $('.tab_area').hide();
  
            $(jQuery(this).find('a').attr('href')).fadeIn();
            return false;
        });
    });
})(jQuery);
</script>
</head>

3.HTML内のタブを設置したい場所にコードを記述

<ul class="tab">
    <li><a href="#tab1">新着記事</a></li>
    <li><a href="#tab2">カテゴリ</a></li>
    <li><a href="#tab3">ランダム</a></li>
</ul>
<div class="tab_content">
    <div class="tab_area" id="tab1">新着記事の中身</div>
    <div class="tab_area" id="tab2">カテゴリの中身</div>
    <div class="tab_area" id="tab3">ランダムの中身</div>
</div>

4.スタイルシートで見映えをカスタムする

.tab {
    list-style-type: none;
}
.tab li { /*タブ部分*/
	float: left;
	margin: 0 2px;
	padding: 3px 7px;
	background: #fbd594;
	}
.tab li.active { /*選択中のタブ*/
	background: #c9c9c9;
    }
.tab_area { /*切り替え部分非表示*/
    display: none;
    }
.tab_content { /*内容*/
    clear: both;
    width: 300px;
    border: 1px solid #999;
	padding: 20px;
    }