modified: script.js

modified:   test.html

script.js

@@ -1,7 +1,7 @@
 $(document).ready(function() {
     // 默认显示第一个选项卡
     $(".tabcontent").hide();
-    $("#Tab1").show();
+    $("#Tab0").show();
     $(".tablinks").first().addClass("active");
 
     // 点击选项卡按钮时切换内容
@@ -24,25 +24,24 @@ $(document).ready(function() {
 
     // 添加新选项卡
     $("#addTab").click(function() {
-        var newTabId = "Tab" + ($(".tablinks").length + 1);
-        var newTabButton = `<button class="tablinks" data-tab="${newTabId}">第${$(".tablinks").length}张照片<span class="closeButton" data-tab="${newTabId}">x</span></button>`;
+        var newIndex = findNextAvailableIndex();
+        var newTabId = "Tab" + newIndex;
+        var newTabButton = `<button class="tablinks" data-tab="${newTabId}">第${newIndex}张照片<span class="closeButton" data-tab="${newTabId}">x</span></button>`;
         var newTabContent = `
             <div id="${newTabId}" class="tabcontent">
-                <h3>第${$(".tablinks").length}张照片</h3>
-                <img style="max-width:100%;overflow:hidden;" src="./jpg/${$(".tablinks").length}.jpg" alt="第${$(".tablinks").length}张照片">
+                <h3>第${newIndex}张照片</h3>
+                <img style="max-width:100%;overflow:hidden;" src="./jpg/${newIndex}.jpg" alt="第${newIndex}张照片">
             </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());
+        updateContentOpacity($("#mySlider").val());
     });
-
     // 删除选项卡
     $(document).on("click", ".closeButton", function() {
         var tabName = $(this).data("tab");
@@ -118,6 +117,18 @@ $(document).ready(function() {
             updateContentOpacity($("#mySlider").val());
         });
     }
+    function findNextAvailableIndex() {
+        var indices = $(".tablinks").map(function() {
+            return parseInt($(this).data("tab").replace("Tab", ""));
+        }).get();
+        indices.sort((a, b) => a - b); // 确保索引是按顺序排列的
+        for (var i = 1; i <= indices.length + 1; i++) {
+            if (!indices.includes(i)) {
+                return i;
+            }
+        }
+        return indices.length + 1;
+    }
     // 初始绑定事件
     bindTabEvents();
 $(document).ready(function() {

test.html

@@ -13,10 +13,10 @@
         <span id="sliderValue">50</span>
     </div>
     <div class="tab">
-        <button class="tablinks" data-tab="Tab1">日历</button>
+        <button class="tablinks" data-tab="Tab0">日历</button>
         <button id="addTab" class="addTab">+</button>
     </div>
-    <div id="Tab1" class="tabcontent">
+    <div id="Tab0" class="tabcontent">
         <h3 id="selectedDate">点击日期后，当前位置显示所点日期</h3>
         <div class="cldBody">
             <table>