CSS的可见性属性非常有用,比如我们可以用它来实现一个选项卡效果。
<ul> <li id="tab1">选项卡1</li> <li id="tab2">选项卡2</li> <li id="tab3">选项卡3</li> </ul>
然后,我们可以用CSS来控制选项卡的显示和隐藏,比如:
/* 隐藏所有选项卡内容 */ #tab1-content,#tab2-content,#tab3-content { display: none; } /* 显示当前选项卡内容 */ #tab1:checked ~ #tab1-content,#tab2:checked ~ #tab2-content,#tab3:checked ~ #tab3-content { display: block; } /* 点击选项卡切换 */ li { display: inline-block; background-color: #ccc; padding: 10px; margin-right: 10px; cursor: pointer; } li:hover { background-color: #ddd; } input[type="radio"] { display: none; }
其中,我们用来作为选项卡的切换按钮,每个按钮对应一个选项卡的ID。当按钮被选中时,对应的选项卡内容会显示出来。
通过这样的方式,我们就可以很方便地实现选项卡效果了。