<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.widget-tab input{display:none}/* radio 隐藏 */
.widget-tab .widget-box ul{display:none}/* 需要展示内容的容器全部隐藏 */
#new:checked ~ .widget-title .new,
#hot:checked ~ .widget-title .hot,
#random:checked ~ .widget-title .random{background:#F7F7F7} /* 设置选择的模块标题 背景颜色 */
#new:checked ~ .widget-box .new-list,
#hot:checked ~ .widget-box .hot-list,
#random:checked ~ .widget-box .random-list{display:block}/* radio 选中时，显示指定的容器框 */
</style>
</head>
<body>
<div class="widget widget-tab">
<input type="radio" name="widget-tab" id="new" checked="checked" />
<input type="radio" name="widget-tab" id="hot" />
<input type="radio" name="widget-tab" id="random" />
<div class="widget-title inline-block">
<ul>
<li class="new">
<label for="new">最新博文</label>
</li>
<li class="hot">
<label for="hot">热评博文</label>
</li>
<li class="random">
<label for="random">随机博文</label>
</li>
</ul>
</div>
<div class="widget-box">
<ul class="new-list">
<li>…最新博文…1.。。</li>
</ul>
<ul class="hot-list">
<li>热评博文000…2…</li>
</ul>
<ul class="random-list">
<li>随机博文…3…0000</li>
</ul>
</div>
</div>
</body>
</html>
![]()
浙公网安备 33010602011771号