Несколько вкладок на странице - HTML CSS

Question

У меня есть следующий код: Ссылка

Проблема в том, что вкладки не активны одновременно, когда одна

активна, другая отключенаи я не знаю, как заставить это работать.Я

использовал только HTML и CSS

Я хочу, чтобы оба были активны на вкладке 1 и чтобы мы оставались активными даже

, хотя у нас есть разные вкладки, потому что моиИдея состоит в том, чтобы добавить больше div с

tabs.Я оставляю ссылку на CodePen, а также вставляю код здесь.

.tabs {
	display: flex;
	flex-wrap: wrap; 
}
.tabs label {
	order: 1; 
	display: block;
	padding: 1rem 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 + label {
	background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}

<div class="tabs">
            <input type="radio" name="tab" id="tabone" checked="checked">
            <label for="tabone">Tab One</label>
            <div class="tab">
              <h1>Tab One Content</h1>
            </div>
            <input type="radio" name="tab" id="tabtwo">
            <label for="tabtwo">Tab Two</label>
            <div class="tab">
              <h1>Tab Two Content</h1>
            </div>
            <input type="radio" name="tab" id="tabthree">
            <label for="tabthree">Tab Three</label>
            <div class="tab">
              <h1>Tab Three Content</h1>
            </div>
          </div>
          <br><br><br>
          <div class="tabs">
                <input type="radio" name="tab" id="tabfour" checked="checked">
                <label for="tabfour">Tab One</label>
                <div class="tab">
                  <h1>Tab One Content</h1>
                </div>
                <input type="radio" name="tab" id="tabfive">
                <label for="tabfive">Tab Two</label>
                <div class="tab">
                  <h1>Tab Two Content</h1>
                </div>
                <input type="radio" name="tab" id="tabsix">
                <label for="tabsix">Tab Three</label>
                <div class="tab">
                  <h1>Tab Three Content</h1>
                </div>
              </div>

Answer 1

Кажется, вы хотите, чтобы многие группы вкладок работали (одна открыта, другие закрыты) независимо друг от друга.

Добавьте различное значение атрибута name для каждого set of tabs, чтобы каждый наборбудет работать как единое целое, где, если одна из них будет открыта, другие вкладки будут закрыты.

В приведенном вами примере все радиостанции вдоль стороны tab внутри первой вкладки могут иметь значение nameатрибут как tab1 и другие радиостанции во второй группе вкладок могут иметь tab2.

PS: атрибут имени радиокнопки позволяет проверять только одну из радиокнопок с тем же именем.

Answer 2

              <div class="tabs">
                <input type="radio" name="tab2" id="tabfour" checked="checked">
                <label for="tabfour">Tab One</label>
                <div class="tab">
                  <h1>Tab One Content</h1>
                </div>
                <input type="radio" name="tab2" id="tabfive">
                <label for="tabfive">Tab Two</label>
                <div class="tab">
                  <h1>Tab Two Content</h1>
                </div>
                <input type="radio" name="tab2" id="tabsix">
                <label for="tabsix">Tab Three</label>
                <div class="tab">
                  <h1>Tab Three Content</h1>
                </div>
              </div>

Для второго раздела добавьте разные значения к атрибуту name для каждого набора переключателей.То, что вы делали раньше, это добавление checked к двум кнопкам в одном наборе переключателей.

Answer 3

Не уверен на 100%, что я понимаю вопрос, но мне кажется, что вам просто нужно использовать другое значение для атрибута name в каждой отдельной вкладке.