模板:切换标签面板

本模板已应用于大量页面。
禁止进行任何改动
为避免大规模的破坏及不必要的服务器负荷，任何改动均应先在沙盒页面或您自己的用户页测试。
为尊重其他用户，任何改动在生效前都应先在wiki编辑交流群讨论。
经过测试正常并讨论通过即可一次性改动本模板。

×

说明文档

使用方法

队伍编号要对应，一个页面只能存在一个相同的序号。

基本调用代码

{{切换标签面板|模板开始|主体样式= }}
{{切换标签面板|开始组队|tab样式= }}
{{切换标签面板|首队编号|编号= |编队名称= |标签样式= }}
{{切换标签面板|结束组队}}
{{切换标签面板|次队编号|编号= |编队名称= |标签样式= }}
{{切换标签面板|结束组队}}
{{切换标签面板|首队内容开始|编号= |内容样式= }}
{{切换标签面板|推荐星痕|星痕名称= （多个成员间以符号#分隔）}}
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号= |内容样式= }}
{{切换标签面板|推荐星痕|星痕名称= （多个成员间以符号#分隔）}}
{{切换标签面板|队伍内容结束}}
{{切换标签面板|模板结束}}

切换标签面板在上方

{{切换标签面板|模板开始}}
{{切换标签面板|开始组队}}
{{切换标签面板|首队编号|编号=1|队伍名称=队伍1}}
{{切换标签面板|次队编号|编号=2|队伍名称=队伍2}}
{{切换标签面板|次队编号|编号=3|队伍名称=队伍3}}
{{切换标签面板|结束组队}}
{{切换标签面板|首队内容开始|编号=1}}
{{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=2}}
队伍2需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=3}}
队伍3需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|模板结束}}

• 队伍1
• 队伍2
• 队伍3

推荐星痕
昔莱 丹妮 桃

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

切换标签面板在上方并居中

{{切换标签面板|模板开始}}
{{切换标签面板|开始组队|tab样式=display: flex; justify-content: center;}}
{{切换标签面板|首队编号|编号=7|队伍名称=队伍1}}
{{切换标签面板|次队编号|编号=8|队伍名称=队伍2}}
{{切换标签面板|次队编号|编号=9|队伍名称=队伍3}}
{{切换标签面板|结束组队}}
{{切换标签面板|首队内容开始|编号=7}}
{{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=8}}
队伍2需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=9}}
队伍3需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|模板结束}}

• 队伍1
• 队伍2
• 队伍3

推荐星痕
昔莱 丹妮 桃

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

切换标签面板在下方

{{切换标签面板|模板开始|主体样式=position: relative; height: 650px; overflow: hidden;}}
{{切换标签面板|首队内容开始|编号=4}}
{{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。[[文件:桃立绘.png]]
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=5}}
队伍2需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=6}}
队伍3需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|开始组队|tab样式=position: absolute; bottom: 0;left: 0;}}
{{切换标签面板|首队编号|编号=4|队伍名称=队伍1}}
{{切换标签面板|次队编号|编号=5|队伍名称=队伍2}}
{{切换标签面板|次队编号|编号=6|队伍名称=队伍3}}
{{切换标签面板|结束组队}}
{{切换标签面板|模板结束}}

推荐星痕
昔莱 丹妮 桃

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

• 队伍1
• 队伍2
• 队伍3

标签在下方居中

{{切换标签面板|模板开始|主体样式=position: relative; height: 650px; overflow: hidden;}}
{{切换标签面板|首队内容开始|编号=10}}
{{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。[[文件:桃立绘.png]]
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=11}}
队伍2需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=12}}
队伍3需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|开始组队|tab样式=position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}}
{{切换标签面板|首队编号|编号=10|队伍名称=队伍1}}
{{切换标签面板|次队编号|编号=11|队伍名称=队伍2}}
{{切换标签面板|次队编号|编号=12|队伍名称=队伍3}}
{{切换标签面板|结束组队}}
{{切换标签面板|模板结束}}

推荐星痕
昔莱 丹妮 桃

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

• 队伍1
• 队伍2
• 队伍3

渐入渐出效果

使用CSS添加渐入渐出效果，一个页面仅需设置一次即可：

{{#CSS:
.tab-pane {  
    opacity: 0; /* 默认透明度为0 */  
    transition: opacity 1s ease-in-out; /* 添加过渡效果 */  
}  
  
.tab-pane.active {  
    opacity: 1; /* 活动状态时透明度为1 */  
    animation: fadeIn 1s ease-in-out; /* 添加关键帧动画 */  
}  
  
@keyframes fadeIn { /* 定义关键帧动画 */  
    0% { opacity: 0; } /* 从透明度0开始 */  
    100% { opacity: 1; } /* 变为透明度1 */  
}
}}

---

所有模板列表