twitterbootstrap2.x button で tab風

2013年8月21日更新 view: 6 view

スマートフォンサイトでのタブメニュー

上記の画像のようなタブメニューを作りたい。
ではどうしたらよいか?

まずはCSS

<style type="text/css">
    
    /*
        初期全て非表示
    */
    div.btn-tabs > div{
        display:none;
    }
    
    
</style>

js

<script type="text/javascript">
    
    $(function() {
        
        $('.btn-group .btn').click(function(){
            
            $('.btn-group .btn').removeClass('btn-primary disabled');
            $(this).addClass('btn-primary disabled');
            
            
            $('.btn-tabs > div').hide();
            $('.btn-tabs > div:nth-child('+$(".btn").index(this)+')').show();
            
        });
        
        
    });
    
</script>

html

<div class="btn-group">
<button type="button" class="btn btn-large">今月</button>
<button type="button" class="btn btn-large">先月</button>
<button type="button" class="btn btn-large">全期間</button>
</div>

<div class="btn-tabs">
    <div>
        今月
    </div>
    <div>
        先月
    </div>
    <div>
        全期間
    </div>
</div>
スポンサードリンク

これで超スッキリ。タブメニューの切り替えの完成です。
スマートフォンではこっちのタブメニューのが見やすくておすすめ。

スポンサードリンク

関連記事

関連カテゴリ