3.2 練習
在 html5 資料夾下，建立一個空的 history 資料夾。並建立 4 個檔案，分別是 a.html、b.html、c.html、d.html。
內容都是：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="./a.html">A 網頁</a></li>
<li><a href="./b.html">B 網頁</a></li>
<li><a href="./c.html">C 網頁</a></li>
<li><a href="./d.html">D 網頁</a></li>
</ul>
<!-- 以下標題，a.html 就寫 A 網頁；b.html 就寫 B 網頁。依此類推 -->
<h1>A 網頁</h1>
</body>
</html>確認使用本機端網域的方式開啟。
練習 1：上一頁、下一頁
step1：
瀏覽 http://127.0.0.1:5500/history/a.html 然後點 B 網頁連結，再點擊 C 網頁連結。開啟開發者工具，到 console 的頁籤，執行以下程式：
上一頁：
下一頁：
相對於當前的頁面，下一頁再下一頁：
練習 2：瀏覽歷程的新增
瀏覽 http://127.0.0.1:5500/history/a.html 頁面，然後點 B 網頁連結，再點擊 C 網頁連結。開啟開發者工具，執行以下程式：
再按「上一頁」、「下一頁」觀察看看頁面的變化。
練習 3：瀏覽歷程的更新
瀏覽 http://127.0.0.1:5500/history/a.html 頁面，然後點 B 網頁連結，再點擊 C 網頁連結。開啟開發者工具，執行以下程式：
再按「上一頁」、「下一頁」觀察看看頁面的變化。
實際用法
練習 1：中間卡一個首頁
註：Safari 16 版本開始之後，變得不支援。
在 history 資料夾裡，再建立一個 e.html 檔案，內容如下：
如果是從 外站，點擊某個連結到自己網站的某一頁(非首頁，此例為 e.html 頁面)，那麼希望按上一頁的時候，設定回到首頁(此例為假設 a.html)。
練習 2：頁籤的瀏覽歷程
在 history 資料夾裡，建立 tab.html 檔案，內容如下：
然後開啟瀏覽器操作看看。
問題點：點擊頁籤，或外部網站，再按上一頁，沒有回到正確的分頁內容。
第一步：點擊頁籤時，加進瀏覽歷程
第二步：加上自訂函式
然後在 popstate 事件觸發時，執行 tab_active() 程式，寫法如下：
第三步：連到外部網站，再按上一頁時，會觸發 DOMContentLoaded 事件，所以再執行：
以下 CodePen，是將上述的 jQuery 轉成 JS 的語法(註：此例無法在 CodePen 上執行)：https://codepen.io/carlos411/pen/dyzEbdj
Last updated