Интерактивные вкладки с использованием только HTML / CSS с проверенным селектором - PullRequest
Новая
       36

Интерактивные вкладки с использованием только HTML / CSS с проверенным селектором

0 голосов
/ 20 октября 2019

Я пытаюсь создать раздел интерактивной вкладки для использования внутри электронного письма в формате HTML, чтобы он мог использовать только HTML / CSS. Что мне нужно сделать, так это показать содержимое по умолчанию, а затем отображать содержимое вкладки 1 только после выбора содержимого вкладки 2. Он у меня полуработающий, но я не могу отобразить вкладку 1 после открытия вкладки 2. Я использую: флажок, чтобы показать вкладки и общий братский комбинатор для отображения связанного содержимого вкладок - два класса .box1 и .box2. Я уверен, что что-то упустил, это возможно сделать, используя только CSS?

Большое спасибо 

/* hide radio element */
.myradio {
  display:none;
  height:0px;
  visibility:hidden;
}
.mybox {
 width:100px;
 height:50px;
 background-color: #eeeeee;
 display:none;
 padding:5px;
}
/* change tab to bold */
.myradio:checked + label {
  font-weight: bold;
} 
/* show content */
#radio1:checked ~ .box1,
#radio2:checked ~ .box2
{
  display:block;
}
<input name="myradio" type=radio id="radio1" class="myradio" checked>
<label for="radio1">Tab 1</label> | 
<input name="myradio" type=radio id="radio2" class="myradio">
<label for="radio2">Tab 2</label>

<div class="mybox box1">Box 1</div>
<div class="mybox box2">Box 2</div>

1 Ответ

0 голосов
/ 21 октября 2019

Вы можете использовать этот код 

body {
  margin: 0;
}

.tabs {
  position: relative;
  clear: both;
  width: 100%;
  float: left;
}

.tabs .tab {
  float: left;
  margin-right: 10px;
  background-color: #dedede;
  padding: 5px 20px;
}

.content {
  position: absolute;
  background-color: #eeeeee;
  padding: 15px;
  width: 100%;
  left: 0px;
  top: 45px;
}

.tabs .tab:nth-of-type(1) .content {
  z-index: 1;
}

.tab:target a {
  font-weight: bold;
  text-decoration: none;
}

.teb a,
a:hover {
  text-decoration: none;
}

.tab:target .content {
  z-index: 1;
}
<div class="tabs">
  <div class="tab" id="tab1">
    <a href="#tab1">Tab 1</a>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae velit vel ante vehicula suscipit. In pulvinar ullamcorper ligula, vel iaculis erat pharetra eu. Vivamus scelerisque bibendum augue, eget efficitur purus venenatis at. Sed pulvinar
      sodales aliquam. Suspendisse efficitur mauris purus. Aenean aliquet sem mi. Nullam fermentum in arcu sit amet sodales. Nunc sed pellentesque metus. Nulla tincidunt quam in ante tempor, et finibus sem semper. Vivamus vel efficitur elit, in sollicitudin
      felis. Curabitur bibendum ullamcorper finibus. Cras iaculis sem at massa tincidunt ullamcorper. Donec faucibus nec ipsum a sollicitudin. Ut commodo dolor at eros laoreet pharetra. </div>
  </div>
  <div class="tab" id="tab2">
    <a href="#tab2">Tab 2</a>
    <div class="content">Ut porttitor mollis metus feugiat facilisis. Etiam sagittis scelerisque tellus, eu convallis dui efficitur nec. Vivamus in pulvinar turpis. Donec vel erat dignissim, commodo elit ac, volutpat ante. Suspendisse nec sollicitudin lorem. Donec ullamcorper
      lacus eget dui mattis posuere. Donec ut auctor odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis tempus elit leo, at blandit est vestibulum imperdiet.</div>
  </div>
  <div class="tab" id="tab3">
    <a href="#tab3">Tab 3</a>
    <div class="content">Fusce ut eros tellus. Morbi varius consectetur ullamcorper. Morbi auctor enim tellus. Phasellus faucibus dapibus lorem, ut eleifend magna pharetra vel. Donec quis purus ut nisi sollicitudin lacinia. In interdum molestie est in sagittis. Maecenas tincidunt
      sodales nisi. Proin commodo in metus in varius. Nulla sodales, neque sit amet fermentum finibus, felis felis vestibulum enim, ut fermentum tellus diam non felis. Proin ac massa sapien. Vestibulum eget arcu ornare, consectetur quam a, rhoncus diam.
      Fusce sagittis consectetur nibh ac porta. </div>
  </div>
</div>
...