用户:Xp00000000/Sandbox：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

可视化wikitext

2025年7月1日 (二) 20:44的版本

点击选择

@@ 第1行： / 第1行： @@
-{| class="wikitable" id="testTable"
+<html>
-!           !! class="toggle-col" data-col="1" | 表头1
+<style>
-|- class="toggle-row" data-row="a"
+.normal-style {
-! class="toggle-row-header" data-row="a" | 表头a
+    padding: 10px;
-| class="cell" data-row="a" data-col="1" | 内容1a
+    background: #eee;
-| class="cell" data-row="a" data-col="2" style="display:none;" | 内容2a
+    cursor: pointer;
-|- class="toggle-row" data-row="b" style="display:none;"
+    margin: 10px 0;
-! class="toggle-row-header" data-row="b" | 表头b
+    border-radius: 4px;
-| class="cell" data-row="b" data-col="1" | 内容1b
+    transition: background 0.3s;
-| class="cell" data-row="b" data-col="2" | 内容2b
+}
-|}
+.clicked-style {
+    background: #ccc;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
+}
+</style>
+<script>
+function toggleColor(element) {
+    element.classList.toggle("clicked-style");
+    // 更新文本内容
+    element.textContent = element.classList.contains("clicked-style")
+        ? "已选中 (点击取消)"
+        : "点击选择";
+    // 存储状态
+    localStorage.setItem('boxState', element.classList.contains("clicked-style"));
+}
+// 页面加载时恢复状态和文本
+window.onload = function() {
+    var box = document.getElementById('myInteractiveBox');
+    if(box) {
+        var isClicked = localStorage.getItem('boxState') === 'true';
+        box.classList.toggle("clicked-style", isClicked);
+        box.textContent = isClicked
+            ? "已选中 (点击取消)"
+            : "点击选择";
+    }
+};
+</script>
+<div id="myInteractiveBox" class="normal-style" onclick="toggleColor(this)">
+点击选择
+</div>
+</html>