html选项卡原生,仅CSS和HTML选项卡组件

基于此示例,使用React:[https://codepen.io/flkt-crnpio/pen/WxROwy/?编辑=1100][1]

问题是:

选项卡内容在单击后始终保持可见,当然我不希望在单击其他选项卡时这样做。内容应该互换。但目前,当我点击第二个选项卡时,两个内容在屏幕上出现重叠。

html:

className="tab-2"

onClick={(e) => {

this.toogleOptionChild(e)

}}

role="button"

>

Für mich

Erwachsenentarif

className="tab-2"

onClick={(e) => {

this.toogleOptionChild(e)

}}

role="button"

>

Für mein Kind

Kindertarif

CSS:

h1 {

font-size: 40px;

line-height: 1em;

color: #696969;

}

button:focus,

input:focus,

textarea:focus,

select:focus {

outline: none;

}

.tabs {

display: block;

display: -webkit-flex;

display: -moz-flex;

display: flex;

-webkit-flex-wrap: wrap;

-moz-flex-wrap: wrap;

flex-wrap: wrap;

margin: 0;

overflow: hidden;

}

.tabs [class^='tab'] label,

.tabs [class*=' tab'] label {

color: #696969;

cursor: pointer;

display: block;

font-size: 1.1em;

font-weight: 300;

line-height: 1em;

padding: 2rem 0;

text-align: center;

}

.tabs [class^='tab'] [type='radio'],

.tabs [class*=' tab'] [type='radio'] {

border-bottom: 1px solid rgba(239, 237, 239, 0.5);

cursor: pointer;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

display: block;

width: 100%;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.tabs [class^='tab'] [type='radio']:hover,

.tabs [class^='tab'] [type='radio']:focus,

.tabs [class*=' tab'] [type='radio']:hover,

.tabs [class*=' tab'] [type='radio']:focus {

border-bottom: 1px solid $cerulean;

}

.tabs [class^='tab'] [type='radio']:checked,

.tabs [class*=' tab'] [type='radio']:checked {

border-bottom: 2px solid $cerulean;

}

.tabs [class^='tab'] [type='radio']:checked + div,

.tabs [class*=' tab'] [type='radio']:checked + div {

opacity: 1;

}

.tabs [class^='tab'] [type='radio'] + div,

.tabs [class*=' tab'] [type='radio'] + div {

display: block;

opacity: 0;

padding: 2rem 0;

width: 90%;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.tabs .tab-2 {

width: 50%;

}

.tabs .tab-2 [type='radio'] + div {

width: 200%;

margin-left: 200%;

}

.tabs .tab-2 [type='radio']:checked + div {

margin-left: 0;

}

.tabs .tab-2:last-child [type='radio'] + div {

margin-left: 100%;

}

.tabs .tab-2:last-child [type='radio']:checked + div {

margin-left: -100%;

}