纯CSS实现导航栏Tab切换效果(3)

这样改造之后，当我们点击 <li> 元素的时候，相当于点击了 <input class="nav1" id="li1" type="radio">这个单选框表单元素，而这个表单元素被点击选中的时候，又可以被 :checked 伪类捕获到。

这个时候，我们就可以将页面上的表单元素隐藏，做到点击 <li> 相当于点击表单：

CSS Code复制内容到剪贴板

input{   

    display:none;   

}  

这样，应用到本题目，我们应该建立如下 DOM 结构：

CSS Code复制内容到剪贴板

<div class="container">   

（编辑：ASP站长网）