modified: script.js

modified:   styles.css

script.js

@@ -19,6 +19,7 @@ $(document).ready(function() {
 
         // 设置当前按钮为活动状态
         $(this).addClass("active");
+        updateContentOpacity($("#mySlider").val());
     });
 
     // 添加新选项卡
@@ -32,10 +33,13 @@ $(document).ready(function() {
                 <img style="max-width:100%;overflow:hidden;" src="./jpg/${$(".tablinks").length}.jpg" alt="第${$(".tablinks").length}张照片">
             </div>
         `;
-
         $(".tab").find(".addTab").before(newTabButton);
         $("body").append(newTabContent);
         // 绑定新添加的选项卡按钮和删除按钮的事件
+        // $(".tabcontent").hide();
+        // $("#" + newTabId).show();
+        // $(".tablinks").removeClass("active");
+        // $(`.tablinks[data-tab="${newTabId}"]`).addClass("active");
         bindTabEvents();
         updateContentOpacity(slider.val());
     });
@@ -65,6 +69,7 @@ $(document).ready(function() {
                 $("#" + $(".tablinks").first().data("tab")).show();
             }
         }
+        updateContentOpacity($("#mySlider").val());
     });
 
     // 绑定选项卡按钮和删除按钮的事件
@@ -83,6 +88,7 @@ $(document).ready(function() {
 
             // 设置当前按钮为活动状态
             $(this).addClass("active");
+            updateContentOpacity($("#mySlider").val());
         });
 
         $(".removeTab").off("click").click(function() {
@@ -110,6 +116,7 @@ $(document).ready(function() {
                     $("#" + $(".tablinks").first().data("tab")).show();
                 }
             }
+            updateContentOpacity($("#mySlider").val());
         });
     }
     // 初始绑定事件

styles.css

@@ -49,9 +49,9 @@
     text-align: center; /* 使“日期”居中显示 */
     display: none;
     padding: 6px 12px;
-    border: 1px solid #ff69b4; /* 粉色边框 */
+    border: 1px solid rgba(255, 255, 255, 0); /* 粉色边框 */
     border-top: none;
-    background-color: rgba(255, 255, 255, var(--content-opacity)); /* 白色背景 */
+    background-color: rgba(255, 255, 255, 0); /* 白色背景 */
 }
 
 /* 删除按钮样式 */