スマホアプリでよく見る、ページ上部のメニュー

• twitterをはじめ多くのアプリに採用されているメニューです。
• 複雑なことをやるとAndroid等で不具合が出やすいので、フリック切り替えなどは諦めています。

デモ

jsbin

html

<!-- とりあえずさくっと動かして欲しいのでCDNでJQを読んでます -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><!-- bootstrapは無くても動きます -->

  <div class="tab-menu-container">
    <nav class="tab-menu-header">
      <div class="select">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </nav><!-- .tab-menu-header -->
    <div class="tab-body">
      <div class="tab-container">
        いちばんのてきすといちばんのてきすといちばんのてきすといちばんのてきすといちばんのてきすといちばんのてきすと
      </div><!-- .tab-container -->
      <div class="tab-container tab-hide">
        にばんのテキストにばんのテキストにばんのテキストにばんのテキストにばんのテキストにばんのテキストにばんのテキスト
      </div><!-- .tab-container -->
      <div class="tab-container tab-hide">
        さんばんのテキストさんばんのテキストさんばんのテキストさんばんのテキストさんばんのテキストさんばんのテキスト
      </div><!-- .tab-container -->
      <div class="tab-container tab-hide">
        よんばんのテキストよんばんのテキストよんばんのテキストよんばんのテキストよんばんのテキストよんばんのテキストよんばんのテキスト
      </div><!-- .tab-container -->
    </div><!-- .tab-body -->
  </div><!-- .tab-menu-container -->

css

.tab-menu-header {
  display: -webkit-box;
  display: box;
  border-bottom: 1px solid #ccc;
}

.tab-menu-header>div {
  background: #fff;
  -webkit-box-flex: 1;
  box-flex: 1;
  width: 100%;
  text-align: center;
  padding: 0.5em 0 0.7em;
  position: relative;
  cursor: pointer;
  display:block;
  color:#ccc;
  font-weight:bold;
}

.tab-menu-header>div.select {
  background: #fff;
  color:#222;
}
.tab-menu-header>div:after {
  content:"";
  display: block;
  height: 0px;
  background: #f00;
  width: 100%;
  position: absolute;
  bottom: -1px;
}
.tab-menu-header>div.select:after {
  height: 3px;
  -webkit-transition-property:background-color,width,height;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0s;
}

.tab-body {
  background: #eee;
  padding: 15px;
}
.tab-body>div {
  background: #fff;
  padding: 15px;
}

.tab-hide {
  display: none;
}

js

$(function() {
    //クリックしたときのファンクションをまとめて指定
    $('.tab-menu-header > div').click(function() {

        //.index()を使いクリックされたタブが何番目かを調べ、
        //indexという変数に代入します。
        var index = $('.tab-menu-header > div').index(this);

        //コンテンツを一度すべて非表示にし、
        $('.tab-body > div').css('display','none');

        //クリックされたタブと同じ順番のコンテンツを表示します。
        $('.tab-body > div').eq(index).css('display','block');

        //一度タブについているクラスselectを消し、
        $('.tab-menu-header > div').removeClass('select');

        //クリックされたタブのみにクラスselectをつけます。
        $(this).addClass('select')
    });
});