シンプルなタブメニュー

Ads

Result

jQuery

$(document).ready(function() {
        //最初に表示するコンテンツ
        $('.area:first').show();
      //class="active"を追加
    $('.tab li:first').addClass('active');

    //クリックイベント
    $('.tab li').click(function() {
        $('.tab li').removeClass('active');
        $(this).addClass('active');
        $('.area').hide();
        $($(this).find('a').attr('href')).fadeIn();
        return false;
    });
});

css

.tab, .tab li, .tab li a {
    float: left;
    padding:3px;
    margin-right:2px;
}
.content {
    clear: both;
    overflow: hidden;
    width: 300px;
    border:1px solid #eee;
    height:300px;
}
.area {
    display: none;
}
.tab li.active {
    background: #eee;
}
.tab li.active a{
    color:red;
}

html

<ul class="tab">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
    <li><a href="#tab4">tab4</a></li>
</ul>
<div class="content">
    <div class="area" id="tab1"> 
        Tab1<br />Tab1<br />Tab1<br />Tab1<br />
    </div>
    <div class="area" id="tab2">
       Tab2<br />Tab2<br />Tab2<br />Tab2<br />
    </div>
    <div class="area" id="tab3">
        Tab3<br />Tab3<br />Tab3<br />Tab3<br />
    </div>
    <div class="area" id="tab4">
        Tab4<br />Tab4<br />Tab4<br />Tab4<br />
    </div>
</div>
タイトルとURLをコピーしました