E:target
DOM结构文档：
<a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">div3</a> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div>
css清单：
div{ width:300px; height:200px; background-color: #000; font:50px/200px "微软雅黑"; color:#fff; text-align:center; display: none; } div:target{ display: block; }
模拟选中效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> label{ float:left; margin:0 5px; overflow:hidden; position:relative; } label input{ position:absolute; left:-50px; top:-50px; } span{ float: left; width:50px; height:50px; border:3px solid #000; } input:checked~span{ background-color: red; } </style> </head> <body> <label> <input type="radio" name="tab"/> <span></span> </label> <label> <input type="radio" name="tab"/> <span></span> </label> </body> </html>