Вкладки только с CSS

Question

Я пытаюсь построить чистые CSS вкладки.Значение атрибута for должно совпадать с идентификатором элемента управления. Я использую псевдокласс: флажок установлен для целевого элемента div, который я хочу раскрыть, но проблема в том, что когда я нажимаю на вкладке два или три, ничего не появляется

Я использую:

tabs input[type="radio"]:checked + h2 + .tab {
    display: block;
}

, чтобы показать div при нажатии

/**
 * Tabs
 */
.tabs {
	display: flex;
	flex-wrap: wrap; 
}
.tabs h2 {
	order: 1;
	display: block;
	padding: 1rem 2rem;
	margin-right: 0.2rem;
	cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
}
.tabs .tab {
  order: 99; 
  flex-grow: 1;
	width: 100%;
	display: none;
  padding: 1rem;
  background: #fff;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + h2 {
	background: #fff;
}
.tabs input[type="radio"]:checked + h2 + .tab {
	display: block;
}


/**
 * Generic Styling
*/
body {
  background: #eee;
  min-height: 100vh;
	box-sizing: border-box;
	padding-top: 10vh;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  line-height: 1.5;
  max-width: 60rem;
  margin: 0 auto;
  font-size: 112%;
}

<div class="tabs">
	<label for="tabone"></label>
  <input type="radio" name="tabs" id="tabone" checked="checked">
  <h2>Tab One</h2>
  <div class="tab">
    <h1>Tab One Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <label for="tabtwo"></label>
  <input type="radio" name="tabs" id="tabtwo">
  <h2>Tab Two</h2>
  <div class="tab">
    <h1>Tab Two Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
    <label for="tabthree"></label>
  <input type="radio" name="tabs" id="tabthree">
  <h2>Tab Three</h2>
  <div class="tab">
    <h1>Tab Three Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

Answer 1

Это работает:

/**
 * Tabs
 */

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs h2 {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label h2 {
  background: #fff;
}

input[type="radio"]:checked~.tab {
  display: block;
}
input[type="radio"]:checked~.tab~.tab {
  display: none;
}


/**
 * Generic Styling
*/

body {
  background: #eee;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 10vh;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  max-width: 60rem;
  margin: 0 auto;
  font-size: 112%;
}

<div class="tabs">
    <input type="radio" name="tabs" id="tabone" checked="checked">
    <label for="tabone"><h2>Tab One</h2></label>

    <div class="tab">
      <h1>Tab One Content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <input type="radio" name="tabs" id="tabtwo">
    <label for="tabtwo"><h2>Tab Two</h2></label>

    <div class="tab">
      <h1>Tab Two Content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <input type="radio" name="tabs" id="tabthree">
    <label for="tabthree"><h2>Tab Three</h2></label>

    <div class="tab">
      <h1>Tab Three Content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>