modified: script.js

modified:   styles.css
	modified:   test.html

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");
 

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; /* 深粉色背景 */
-}

test.html

@@ -43,6 +43,7 @@
                 <tbody id="tbody"></tbody>
             </table>
         </div>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>