模板:Y tabbar：修订间差异
（创建页面，内容为“ <div class="first-level-tabs"> <div id="chinese-tab">中文</div> <div id="japanese-tab">日文</div> </div> <div id="chinese" class="second-level-container"> <div class="second-level-tabs"> <div id="chinese-active-tab">主动技能</div> <div id="chinese-passive-tab">被动技能</div> <div id="chinese-special-tab">特殊技能</div> <div id="chinese-ultimate-tab">必杀技&EX…”） |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
<div class=" | <div class="y_tabbar"> | ||
<div class="first-level-tabs"> | |||
<div | <div id="chinese-tab">中文</div> | ||
<div id="japanese-tab">日文</div> | |||
<div id="chinese | |||
<div id=" | |||
</div> | </div> | ||
<div id="chinese-active" class="content">中文主动技能内容</div> | <div id="chinese" class="second-level-container"> | ||
<div class="second-level-tabs"> | |||
<div id="chinese-active-tab">主动技能</div> | |||
<div id="chinese-passive-tab">被动技能</div> | |||
<div id="chinese-special-tab">特殊技能</div> | |||
<div id="chinese-ultimate-tab">必杀技&EX技能</div> | |||
</div> | |||
<div id="chinese-active" class="content">中文主动技能内容</div> | |||
<div id="chinese-passive" class="content" style="display: none;">中文被动技能内容</div> | |||
<div id="chinese-special" class="content" style="display: none;">中文特殊技能内容</div> | |||
<div id="chinese-ultimate" class="content" style="display: none;">中文必杀技&EX技能内容</div> | |||
</div> | |||
<div id="japanese" class="second-level-container" style="display: none;"> | |||
<div class="second-level-tabs"> | |||
<div id="japanese-active-tab">主动技能</div> | |||
<div id="japanese-passive-tab">被动技能</div> | |||
<div id="japanese-special-tab">特殊技能</div> | |||
<div id="japanese-ultimate-tab">必杀技&EX技能</div> | |||
</div> | |||
<div id="japanese-active" class="content">日文主动技能内容</div> | |||
<div id="japanese-passive" class="content" style="display: none;">日文被动技能内容</div> | |||
<div id="japanese-special" class="content" style="display: none;">日文特殊技能内容</div> | |||
<div id="japanese-ultimate" class="content" style="display: none;">日文必杀技&EX技能内容</div> | |||
</div> | </div> | ||
{{#css: | |||
.y_tabbar { | |||
font-family: Arial, sans-serif; | |||
margin: 0; | |||
padding: 20px; | |||
background-color: transparent; | |||
} | |||
.y_tabbar .first-level-tabs, .y_tabbar .second-level-tabs { | |||
display: flex; | |||
flex-direction: row; | |||
background-color: transparent; | |||
border: none; | |||
border-radius: 5px; | |||
margin-bottom: 0; | |||
} | |||
.y_tabbar .first-level-tabs div, .y_tabbar .second-level-tabs div { | |||
padding: 10px 20px; | |||
cursor: pointer; | |||
border-right: none; | |||
} | |||
.y_tabbar .first-level-tabs div:last-child, .y_tabbar .second-level-tabs div:last-child { | |||
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.active, .y_tabbar .second-level-tabs div.active { | |||
background-color: #e0e0e0; | |||
color: #0000ff; | |||
text-decoration: underline; | |||
} | |||
.y_tabbar .second-level-container { | |||
background-color: transparent; | |||
border: none; | |||
border-radius: 5px; | |||
padding: 0; | |||
margin-left: 0; | |||
} | |||
.y_tabbar .content { | |||
margin-top: 0; | |||
text-align: left; | |||
} | |||
/* 添加选中效果样式 */ | |||
.y_tabbar .selected { | |||
background-color: #c0c0c0; | |||
color: #0000ff; | |||
text-decoration: underline; | |||
} | |||
}} | |||
{{ResourceLoader|MediaWiki:Y_tabbar.js|isModuleES6=true}} | {{ResourceLoader|MediaWiki:Y_tabbar.js|isModuleES6=true}} | ||