html标签选项卡,html – 仅限css3选项卡预选标签

您可以使用单选按钮和：checked class来创建它.

它不使用：target,因此不会有任何页面跳转.

正如您在下面的代码示例中所看到的,每个选项卡都包含单选按钮(用于功能),其中隐藏了display：none,标签作为选项卡和内容div.

HTML

Tab 1

This content appears on tab 1.

Tab 2

This content appears on tab 2.

Tab 3

This content appears on tab 3.

内容区域以绝对定位位于彼此之上,当选中单选按钮时,使内容区域位于z-index的顶部.

CSS

.tabs {

position: relative;

min-height: 200px; /* This part sucks */

clear: both;

margin: 25px 0;

}

.tab {

float: left;

}

.tab label {

background: #eee;

padding: 10px;

border: 1px solid #ccc;

margin-left: -1px;

position: relative;

left: 1px;

}

.tab [type=radio] {

display: none;

}

.content {

position: absolute;

top: 28px;

left: 0;

background: white;

right: 0;

bottom: 0;

padding: 20px;

border: 1px solid #ccc;

}

[type=radio]:checked ~ label {

background: white;

border-bottom: 1px solid white;

z-index: 2;

}

[type=radio]:checked ~ label ~ .content {

z-index: 1;

}