jQuery Mobileを使用してタブ表示をします。
data-role="tabs"内に、data-role="navbar"のdivを追加します。
div内にはリストビューを書き、アンカーで内部リンクを指定します。内部リンクで指定したhtml部分がタブのページ内に表示されます。
以下、例です。

<div data-role="content">
  <div data-role="tabs">
    <div data-role="navbar">
      <ul>
        <li><a href="#mi" data-theme="a" data-ajax="false">未</a></li>
        <li><a href="#kan" data-theme="a" data-ajax="false">完</a></li>
      </ul>
    </div>
    <div id="mi" class="ui-content">
      <ul data-role="listview">
        <li><a href="#">まだ１</a></li>
        <li><a href="#">まだ２</a></li>
      </ul>
    </div>
    <div id="kan" class="ui-content">
      <ul data-role="listview">
        <li><a href="#">終わり１</a></li>
        <li><a href="#">終わり２</a></li>
      </ul>
    </div>
  </div>
</div>

タブのDEMOです。

上記例では「未」のページが表示されていますが、タブの色がアクティブな状態になっていないため、どちらのページが表示されているかわかりません。
aタグのclass属性にui-btn-activeを指定するとアクティブにすることができます。

<div data-role="content">
  <div data-role="tabs">
    <div data-role="navbar">
      <ul>
        <li><a href="#mi" data-theme="a" data-ajax="false" class="ui-btn-active">未</a></li>
        <li><a href="#kan" data-theme="a" data-ajax="false">完</a></li>
      </ul>
    </div>
    <div id="mi" class="ui-content">
      <ul data-role="listview">
        <li><a href="#">まだ１</a></li>
        <li><a href="#">まだ２</a></li>
      </ul>
    </div>
    <div id="kan" class="ui-content">
      <ul data-role="listview">
        <li><a href="#">終わり１</a></li>
        <li><a href="#">終わり２</a></li>
      </ul>
    </div>
  </div>
</div>

タブのDEMOです。