查看“模板:Tab2/文档”的源代码

<h2>说明</h2>
此案暂且废弃，停止使用，对于id禁止重复方面难以控制，后续看情况迭代
选项切换显示内容<br>
支持嵌套、显示选项允许同名、选项可以使用图片
CSS样式调用：<pre>{{对话CSS|对话选项=Tab}}</pre>
<br><br><br>
<h2>使用方法</h2>
<pre>
{{Tab2
|active=<自定义激活标记>
|选项<编号><激活标记>=显示选项
|内容<编号><激活标记>=显示内容
}}
</pre>
<h3>参数说明</h3>
{|class=lysktable
|-
!参数!!说明!!参考
|-
|选项<编号><激活标记>||编号：所有选项编号禁止相同<br>激活标记：默认为@@@，标识该选项为默认激活||选项1=A选项<br>选项2@@@=B选项
|-
|内容<编号><激活标记>||编号：和对应选项编号必须相同<br>激活标记：默认为@@@，标识该内容为默认激活||内容1=A内容<br>内容2@@@=B内容
|-
|active=<自定义激活标记>||用新的字符替代默认标记@@@，没有需求可以不写||active=$
|}
<h3>举例1</h3>
<pre>
{{Tab2
|选项A1=A选项
|选项A2@@@=B选项
|内容A1=A内容
|内容A2@@@=B内容
}}
</pre><br>
举例1的显示
{{Tab2
|选项A1=A选项
|选项A2@@@=B选项
|内容A1=A内容
|内容A2@@@=B内容
}}
<br><br>
<h3>举例2</h3>
<pre>
{{Tab2|active=$
|选项1=[[file:钻石.png|16x16px|link=]]
|选项2$=[[file:金币.png|16x16px|link=]]
|内容1=A内容
|内容2$=B内容
}}
</pre><br>
举例2的显示
{{Tab2|active=$
|选项1=[[file:钻石.png|16x16px|link=]]
|选项2$=[[file:金币.png|16x16px|link=]]
|内容1=A内容
|内容2$=B内容
}}
<br><br>
<h3>举例3嵌套</h3>
<pre>
{{Tab2
|active=$
|选项11={{短信表情|钻石}}
|选项12$=B
|内容11=111
|内容12$={{Tab2
|active=$
|选项12-1={{短信表情|钻石}}
|选项12-2$=B
|内容12-1=111
|内容12-2$=222
}}
}}
</pre><br>
举例2的显示
{{Tab2
|active=$
|选项11={{短信表情|钻石}}
|选项12$=B
|内容11=111
|内容12$={{Tab2
|active=$
|选项12-1={{短信表情|钻石}}
|选项12-2$=B
|内容12-1=111
|内容12-2$=222
}}
}}
<br><br><br>
{{对话CSS|对话选项=Tab}}
{{#CSS:
table.lysktable td,
table.lysktable th{
padding:10px;
}
<!--模板:马老师的Taba魔改div--无需改动，保留即可-->
<!-- .tab ul li div, .tab ul li div:hover,ul li div:active,ul li div:focus {text-decoration:none;color:inherit;display:block;} -->
<!-- .tab ul li.active a, .tab ul li.active a, .tab ul li a:hover,ul li.active a:active,ul li.active a:focus {color:inherit;} -->
.tab ul{list-style-type: none;padding-left: 0;text-align:center;}
.tab ul li {<!--标签样式-->
    width: 80%;
    display: block;
    border-radius: 20px;
    border: 1px solid #736e7759;
    background-color:#dddddd54;
    margin: 5px auto;
    color: #736e77;
    text-align: center;
    font-size: 14px;
}
.tab ul li div{padding:5px;cursor: pointer;}
.tab ul li div:hover {<!--鼠标指着样式-->
    color:#666;
    font-weight:bold;
}
.tab ul li.active {<!--激活样式-->
    color:#666;
    background-color:#ffffff54;
    border: 1px solid #736e77;
    font-weight:bold;
}
<!-- .tab .tab-content{border-bottom:1px solid #736e7730;margin-bottom:10px;} -->
}}