<!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>
