模板:Y tabbar：修订间差异

2025年4月7日 (一) 10:50的版本

中文

日文

主动技能

被动技能

特殊技能

必杀技&EX技能

@@ 第1行： / 第1行： @@
      <div class="y_tabbar">
          <div class="first-level-tabs">
-             <div id="chinese-tab">中文</div>
+             <div class="tab-btn" id="chinese-tab">中文</div>
-             <div id="japanese-tab">日文</div>
+             <div class="tab-btn" id="japanese-tab">日文</div>
          </div>
          <div id="chinese" class="second-level-container">
              <div class="second-level-tabs">
-                 <div id="chinese-active-tab">主动技能</div>
+                 <div class="tab-btn" id="chinese-active-tab">主动技能</div>
-                 <div id="chinese-passive-tab">被动技能</div>
+                 <div class="tab-btn" id="chinese-passive-tab">被动技能</div>
-                 <div id="chinese-special-tab">特殊技能</div>
+                 <div class="tab-btn" id="chinese-special-tab">特殊技能</div>
-                 <div id="chinese-ultimate-tab">必杀技&EX技能</div>
+                 <div class="tab-btn" id="chinese-ultimate-tab">必杀技&EX技能</div>
              </div>
              <div id="chinese-active" class="content">
-{{#invoke:角色技能|角色技能|角色序号= 10 |查询类型=主动|查询语言=中文}}
+                {{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=主动|查询语言=中文}}
-</div>
+            </div>
              <div id="chinese-passive" class="content" style="display: none;">
-{{#invoke:角色技能|角色技能|角色序号= 10 |查询类型=被动|查询语言=中文}}
+                {{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=被动|查询语言=中文}}
-</div>
+            </div>
              <div id="chinese-special" class="content" style="display: none;">
-{{#invoke:角色技能|角色技能|角色序号= 10 |查询类型=特殊|查询语言=中文}}
+                {{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=特殊|查询语言=中文}}
-</div>
+            </div>
              <div id="chinese-ultimate" class="content" style="display: none;">
-{{#invoke:角色技能|角色技能|角色序号= 10 |查询类型=EX|查询语言=中文}}
+                {{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=EX|查询语言=中文}}
-</div>
+            </div>
          </div>
          <div id="japanese" class="second-level-container" style="display: none;">
              <div class="second-level-tabs">
-                 <div id="japanese-active-tab">主动技能</div>
+                 <div class="tab-btn" id="japanese-active-tab">主动技能</div>
-                 <div id="japanese-passive-tab">被动技能</div>
+                 <div class="tab-btn" id="japanese-passive-tab">被动技能</div>
-                 <div id="japanese-special-tab">特殊技能</div>
+                 <div class="tab-btn" id="japanese-special-tab">特殊技能</div>
-                 <div id="japanese-ultimate-tab">必杀技&EX技能</div>
+                 <div class="tab-btn" id="japanese-ultimate-tab">必杀技&EX技能</div>
              </div>
              <div id="japanese-active" class="content">
-{{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=主动|查询语言=日文}}
+                {{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=主动|查询语言=日文}}
-</div>
+            </div>
              <div id="japanese-passive" class="content" style="display: none;">
-{{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=被动|查询语言=日文}}
+                {{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=被动|查询语言=日文}}
-</div>
+            </div>
              <div id="japanese-special" class="content" style="display: none;">
-{{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=特殊|查询语言=日文}}
+                {{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=特殊|查询语言=日文}}
-</div>
+            </div>
              <div id="japanese-ultimate" class="content" style="display: none;">
-{{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=EX|查询语言=日文}}
+                {{#invoke:角色技能|角色技能|角色序号={{#var:角色序号}}|查询类型=EX|查询语言=日文}}
-</div>
+            </div>
          </div>
+    </div>
 {{#css:
-        .y_tabbar {
+    .y_tabbar {
-            font-family: Arial, sans-serif;
+        font-family: Arial, sans-serif;
-            margin: 0;
+        margin: 0;
-            padding: 20px;
+        padding: 20px;
-            background-color: transparent;
+        background-color: transparent;
-        }
+    }
-        .y_tabbar .first-level-tabs, .y_tabbar .second-level-tabs {
-            display: flex;
+    .y_tabbar .first-level-tabs,
-            flex-direction: row;
+    .y_tabbar .second-level-tabs {
-            background-color: transparent;
+        display: flex;
-            border: none;
+        flex-direction: row;
-            border-radius: 5px;
+        background-color: transparent;
-            margin-bottom: 0;
+        margin-bottom: 0;
-        }
+        color: #457afb;
-        .y_tabbar .first-level-tabs div, .y_tabbar .second-level-tabs div {
+        /* border-bottom: 1px solid #457afb; */
-            padding: 10px 20px;
+        box-shadow: inset 0 -1px 0 0 #a2a9b1;
-            cursor: pointer;
+    }
-            border-right: none;
+    .y_tabbar .first-level-tabs .tab-btn:hover,
-        }
+    .y_tabbar .second-level-tabs .tab-btn:hover {
-        .y_tabbar .first-level-tabs div:last-child, .y_tabbar .second-level-tabs div:last-child {
+        text-decoration: underline;
-            border-right: none;
+    }
-        }
-        .y_tabbar .first-level-tabs div:hover, .y_tabbar .second-level-tabs div:hover {
-            background-color: #e0e0e0;
-        }
+    .y_tabbar .first-level-tabs div,
-        .y_tabbar .first-level-tabs div.active, .y_tabbar .second-level-tabs div.active {
+    .y_tabbar .second-level-tabs div {
-            background-color: #e0e0e0;
+        padding: 10px 20px;
-            color: #0000ff;
+        cursor: pointer;
-            text-decoration: underline;
+        border-right: none;
-        }
+    }
-        .y_tabbar .second-level-container {
-            background-color: transparent;
+    .y_tabbar .first-level-tabs div:last-child,
-            border: none;
+    .y_tabbar .second-level-tabs div:last-child {
-            border-radius: 5px;
+        border-right: none;
-            padding: 0;
+    }
-            margin-left: 0;
-        }
+    .y_tabbar .first-level-tabs div.active,
-        .y_tabbar .content {
+    .y_tabbar .second-level-tabs div.active {
-            margin-top: 0;
+        background-color: #e0e0e0;
-            text-align: left;
+        text-decoration: underline;
-        }
+    }
-        /* 添加选中效果样式 */
-        .y_tabbar .selected {
+    .y_tabbar .second-level-container {
-            color: #0000ff;
+        background-color: transparent;
-            text-decoration: underline;
+        border: none;
-        }
+        border-radius: 5px;
+        padding: 0;
+        margin-left: 0;
+    }
+    .y_tabbar .content {
+        margin-top: 0;
+        text-align: left;
+    }
+    /* 添加选中效果样式 */
+    .y_tabbar .selected {
+        border-bottom: 3px solid #457afb;
+    }
 .skillbox {