modified: script.js

modified:   styles.css
	modified:   test.html
This commit is contained in:
IrisVega 2024-07-09 16:51:25 +08:00
parent dcb98a2632
commit 52c7d2f7bc
3 changed files with 9 additions and 22 deletions

View File

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

View File

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

View File

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