新的纯css TAB切换自定义UBB测试
2年前
超过1044天
温馨提示
本文最后更新于2022年03月10日，已超过1044天没有更新，若内容或图片失效，请留言反馈。
typecho TAB切换自定义UBB代码
php代码
//自定义ubb代码
function ubb($nr){
/*tab自定义配套ubb*/
$nr = preg_replace("/\[ta\](.+?)\[\/ta\]/s","
<div class='tpt-bar'>\\1</div>", $nr);
$nr = preg_replace("/\[taa=(.+?)\](.+?)\[\/taa=(.+?)\]/s","
<input type='radio' name='bar' id='tab-\\1'>
<label for='tab-\\1'>\\3</label>
<div class='tpt-bar-con'>\\2</div>
", $nr);
/*tab自定义配套ubb结束*/
return $nr;
}
css样式
/*纯css TAB切换*/
.tpt-bar {
display:flex;
border:1px solid #e2e2e2;
border-radius:2px;
background:#f2f2f2;
flex-wrap:wrap;
}
.tpt-bar label {
display:block;
padding:0 20px;
height:38px;
line-height:38px;
cursor:pointer;
order:1;
}
.tpt-bar .tpt-bar-con {
z-index:0;
display:none;
margin-top:-1px;
padding:10px;
width:100%;
min-height:120px;
border-top:1px solid #e2e2e2;
background:#fff;
order:99;
}
.tpt-bar input[type=radio] {
position:absolute;
opacity:0;
}
.tpt-bar input[type=radio]:checked+label {
z-index:1;
margin-right:-1px;
margin-left:-1px;
border-right:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
background:#fff;
}
.tpt-bar input[type=radio]:checked+label+.tpt-bar-con {
display:block;
}
/*纯css TAB切换结束*/
使用方法（具体代码需要自行修改）
使用效果
[tab]
[taba=1]我是内容1[/taba=标题1]
[taba=2]我是内容2[/taba=标题2]
[/tab]
0 赞
or 打赏
喜欢就打赏一点
