新的纯css TAB切换自定义UBB测试

PHP代码
190 0

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]

最后更新 2022-03-10
评论 ( 0 )
OωO
隐私评论