diff --git a/html/assets/css/main.css b/html/assets/css/main.css
new file mode 100644
index 0000000..a2c74fd
--- /dev/null
+++ b/html/assets/css/main.css
@@ -0,0 +1,24 @@
+#list {
+  width: 100%;
+  text-align: center;
+  border-spacing: 0;
+  border: 0.4px solid black;
+}
+
+#list tr {
+  height: min(1.85rem, 50px);
+}
+
+#list td {
+  margin: 0;
+  border: 0.4px solid black;
+}
+
+/* 热搜的 label 样式 */
+.hotband-label {
+  color: white;
+  padding: 3px;
+  border-radius: 6px;
+  font-size: 10px;
+  display: inline-block;
+}
diff --git a/html/bilibili.html b/html/bilibili.html
index f698d7a..12a4aac 100644
--- a/html/bilibili.html
+++ b/html/bilibili.html
@@ -6,32 +6,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>B站热搜</title>
+    <link rel="stylesheet" href="./assets/css/main.css">
     <style>
-        #list {
-            width: 100%;
-            text-align: center;
-            border-spacing: 0;
-            border: 0.4px solid black;
-        }
-
-        #list tr {
-            height: min(1.85rem, 50px);
-        }
-
         #list td {
-            margin: 0;
-            border: 0.4px solid black;
             font-size: 14px;
         }
-
-        /* 热搜的 label 样式 */
-        .hotband-label {
-            color: white;
-            padding: 3px;
-            border-radius: 6px;
-            font-size: 10px;
-            display: inline-block;
-        }
     </style>
 </head>
 
diff --git a/html/weibo.html b/html/weibo.html
index 3c21e8b..275ceb2 100644
--- a/html/weibo.html
+++ b/html/weibo.html
@@ -6,32 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>微博热搜</title>
-    <style>
-        #list {
-            width: 100%;
-            text-align: center;
-            border-spacing: 0;
-            border: 0.4px solid black;
-        }
-
-        #list tr {
-            height: min(1.85rem, 50px);
-        }
-
-        #list td {
-            margin: 0;
-            border: 0.4px solid black;
-        }
-
-        /* 热搜的 label 样式 */
-        .hotband-label {
-            color: white;
-            padding: 3px;
-            border-radius: 6px;
-            font-size: 10px;
-            display: inline-block;
-        }
-    </style>
+    <link rel="stylesheet" href="./assets/css/main.css">
 </head>
 
 <body>
diff --git a/index.html b/index.html
index deedc9d..abfc0b2 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
             height: 100%;
         }
 
+        .iframe-container,
         iframe {
             width: 100%;
             height: 100%;
@@ -69,13 +70,15 @@
 
 <body>
     <div class="container">
-        <iframe src="html/weibo.html" frameborder="0" style=""></iframe>
+        <div id="iframe-container">
+            <!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
+        </div>
         <div id="float-container" class="bt">
-            <div class="navbar-item active" targetPage="html/weibo.html">
+            <div class="navbar-item" targetPage="weibo">
                 <img class="navbar-image" src="./html/assets/image/weibo.svg" />
                 <p class="navbar-title">微博</p>
             </div>
-            <div class="navbar-item" targetPage="html/bilibili.html">
+            <div class="navbar-item" targetPage="bilibili">
                 <img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.84);" />
                 <p class="navbar-title">B站</p>
             </div>
@@ -83,16 +86,67 @@
     </div>
     <script>
         let navbarItems = document.querySelectorAll('.navbar-item');
+        let iframeContainer = document.querySelector('#iframe-container');
         let iframe = document.querySelector('iframe');
         navbarItems.forEach(item => {
             item.addEventListener('click', () => {
+                // 已选中项再次点击，不执行操作
+                if(item.classList.contains('active')) return;
+
                 navbarItems.forEach(item => {
                     item.classList.remove('active');
                 });
                 item.classList.add('active');
-                iframe.src = item.getAttribute('targetPage');
+
+                let target = item.getAttribute('targetPage');
+                switchPage(target, true);
             });
         });
+
+        // 切换页面
+        // 传入参数：目标页面，是否更新网址
+        function switchPage(target, pushState) {
+            let url = `html/${target}.html`;
+            if (pushState) {
+                // 更新url但不刷新页面
+                history.pushState(null, null, `./index.html?target=${target}`);
+            }
+
+            // iframe 进入新页面
+            if (iframe)
+                iframe.remove();
+            iframe = document.createElement('iframe');
+            iframe.src = url;
+            iframe.setAttribute('frameborder', '0');
+            iframeContainer.appendChild(iframe);
+        }
+
+        // 根据 URL 参数切换页面
+        function locationToPageByUrlParam() {
+            let pages = ['weibo', 'bilibili'];
+            // 获取 url 中的 target 参数
+            let url = new URL(window.location.href);
+            let target = url.searchParams.get('target');
+            if (!pages.includes(target)) {
+                target = 'weibo';
+                history.replaceState(null, null, `./index.html?target=${target}`);
+            }
+            // 切换页面
+            switchPage(target, false);
+            // 更新下方导航栏选中状态
+            navbarItems.forEach(item => {
+                if (item.getAttribute('targetPage') === target) {
+                    item.classList.add('active');
+                }
+            });
+        }
+
+        window.addEventListener("popstate", function (e) {
+            console.log("浏览器返回事件", e);
+            locationToPageByUrlParam();
+        }, false);
+
+        locationToPageByUrlParam();
     </script>
 </body>
 
