From 52c7d2f7bc7a2c548eee5445979055fbf26916d5 Mon Sep 17 00:00:00 2001
From: IrisVega <wxb78202220@outlook.com>
Date: Tue, 9 Jul 2024 16:51:25 +0800
Subject: [PATCH] 	modified:   script.js 	modified:   styles.css 
 modified:   test.html

---
 script.js  |  5 ++---
 styles.css | 21 ++++-----------------
 test.html  |  5 +++--
 3 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/script.js b/script.js
index 1fc3ffc..098dbc1 100644
--- a/script.js
+++ b/script.js
@@ -25,10 +25,9 @@ $(document).ready(function() {
     // 添加新选项卡
     $("#addTab").click(function() {
         var newTabId = "Tab" + ($(".tablinks").length + 1);
-        var newTabButton = `<button class="tablinks" data-tab="${newTabId}">第${$(".tablinks").length}张照片</button>`;
+        var newTabButton = `<button class="tablinks" data-tab="${newTabId}">第${$(".tablinks").length}张照片<span class="closeButton" data-tab="${newTabId}">x</span></button>`;
         var newTabContent = `
             <div id="${newTabId}" class="tabcontent">
-                <button class="removeTab" data-tab="${newTabId}">x</button>
                 <h3>第${$(".tablinks").length}张照片</h3>
                 <img style="max-width:100%;overflow:hidden;" src="./jpg/${$(".tablinks").length}.jpg" alt="第${$(".tablinks").length}张照片">
             </div>
@@ -45,7 +44,7 @@ $(document).ready(function() {
     });
 
     // 删除选项卡
-    $(document).on("click", ".removeTab", function() {
+    $(document).on("click", ".closeButton", function() {
         var tabName = $(this).data("tab");
         var activeTab = $(".tablinks.active").data("tab");
 
diff --git a/styles.css b/styles.css
index da08d42..faccbe8 100644
--- a/styles.css
+++ b/styles.css
@@ -18,6 +18,7 @@
     padding: 14px 16px;
     transition: 0.3s;
     color: #000; /* 黑色文字 */
+    position: relative;
 }
 
 .tab button:hover {
@@ -55,7 +56,7 @@
 }
 
 /* 删除按钮样式 */
-.removeTab {
+.closeButton {
     background-color: #ff69b4; /* 粉色背景 */
     color: #fff; /* 白色文字 */
     border: none;
@@ -66,11 +67,11 @@
     font-size: 12px; /* 调整字体大小 */
 }
 
-.removeTab:hover {
+.closeButton:hover {
     background-color: #ff1493; /* 深粉色背景 */
 }
 
-img{height: auto; width: auto\9; width:28%;}
+img { height: auto; width: auto\9; width:28%; }
 
 .cldBody {
     background-color: rgba(255, 255, 255, var(--content-opacity));
@@ -135,17 +136,3 @@ span {
     font-size: 1.2em;
     font-weight: bold;
 }
-.closeButton {
-    background-color: #ff69b4; /* 粉色背景 */
-    color: #fff; /* 白色文字 */
-    border: none;
-    outline: none;
-    cursor: pointer;
-    padding: 5px 10px;
-    transition: 0.3s;
-    font-size: 12px; /* 调整字体大小 */
-}
-
-.closeButton:hover {
-    background-color: #ff1493; /* 深粉色背景 */
-}
\ No newline at end of file
diff --git a/test.html b/test.html
index 7e4615c..f6c35e6 100644
--- a/test.html
+++ b/test.html
@@ -43,6 +43,7 @@
                 <tbody id="tbody"></tbody>
             </table>
         </div>
-    <script src="script.js"></script>    
+    </div>
+    <script src="script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>