IrisVega
/
test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: script.js 

modified:   test.html
This commit is contained in:
IrisVega 2024-07-10 09:57:27 +08:00
parent b2cf66c56c
commit 0205e9cd43
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
script.js
View File

@ -1,7 +1,7 @@
$(document).ready(function() { $(document).ready(function() {
// 默认显示第一个选项卡 // 默认显示第一个选项卡
$(".tabcontent").hide(); $(".tabcontent").hide();
$("#Tab1").show(); $("#Tab0").show();
$(".tablinks").first().addClass("active"); $(".tablinks").first().addClass("active");
// 点击选项卡按钮时切换内容 // 点击选项卡按钮时切换内容
@ -24,25 +24,24 @@ $(document).ready(function() {
// 添加新选项卡 // 添加新选项卡
$("#addTab").click(function() { $("#addTab").click(function() {
var newTabId = "Tab" + ($(".tablinks").length + 1); var newIndex = findNextAvailableIndex();
var newTabButton = `<button class="tablinks" data-tab="${newTabId}">第${$(".tablinks").length}张照片<span class="closeButton" data-tab="${newTabId}">x</span></button>`; var newTabId = "Tab" + newIndex;
var newTabButton = `<button class="tablinks" data-tab="${newTabId}">第${newIndex}张照片<span class="closeButton" data-tab="${newTabId}">x</span></button>`;
var newTabContent = ` var newTabContent = `
<div id="${newTabId}" class="tabcontent"> <div id="${newTabId}" class="tabcontent">
<h3>第${$(".tablinks").length}张照片</h3> <h3>第${newIndex}张照片</h3>
<img style="max-width:100%;overflow:hidden;" src="./jpg/${$(".tablinks").length}.jpg" alt="第${$(".tablinks").length}张照片"> <img style="max-width:100%;overflow:hidden;" src="./jpg/${newIndex}.jpg" alt="第${newIndex}张照片">
</div> </div>
`; `;
$(".tab").find(".addTab").before(newTabButton); $(".tab").find(".addTab").before(newTabButton);
$("body").append(newTabContent); $("body").append(newTabContent);
// 绑定新添加的选项卡按钮和删除按钮的事件
$(".tabcontent").hide(); $(".tabcontent").hide();
$("#" + newTabId).show(); $("#" + newTabId).show();
$(".tablinks").removeClass("active"); $(".tablinks").removeClass("active");
$(`.tablinks[data-tab="${newTabId}"]`).addClass("active"); $(`.tablinks[data-tab="${newTabId}"]`).addClass("active");
bindTabEvents(); bindTabEvents();
updateContentOpacity(slider.val()); updateContentOpacity($("#mySlider").val());
}); });
// 删除选项卡 // 删除选项卡
$(document).on("click", ".closeButton", function() { $(document).on("click", ".closeButton", function() {
var tabName = $(this).data("tab"); var tabName = $(this).data("tab");
@ -118,6 +117,18 @@ $(document).ready(function() {
updateContentOpacity($("#mySlider").val()); 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(); bindTabEvents();
$(document).ready(function() { $(document).ready(function() {

4
test.html
View File

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