JavaScript: pushStateを使ってページの状態を再現可能にする

• デモ: http://code.runnable.com/VvynEqA-pBlEAd_k/

タブ表示形式の記事の任意のタブを開いた状態を、URLパラメータに記述して再現可能にします。
pushStateを使うことで、ブラウザの「戻るボタン」の動作にも対応できます。

---

要点

pushStateを使っているのは下記の部分だけです。
タブの状態を履歴に加える処理をしてもらっています。
URLパラメータを元にタブの状態を再現する処理は、pushStateとは関係ありません。

if (window.history && window.history.pushState) {
  var url = '?tab=' + idx;
  var txt = self.elems.tabs[idx].textContent;
  history.pushState(txt, txt, url);
}

下記の記事に刺激を受けて、今回のサンプルを作ってみました。

• 【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -

---

近況報告

2015年末から3ヶ月鬱になってました。
ゆっくり復帰します。