Блог

Главная - Вопросы по программированию - Как отличить одинаковые отмеченные элементы в CSS и HTML

Как отличить одинаковые отмеченные элементы в CSS и HTML

#html #css #wordpress

#HTML #css #wordpress

Вопрос:

В настоящее время у меня есть два набора одинаковых вкладок на веб-странице. Но когда я выбираю «Шоколад, хлеб или чипсы» во втором наборе вкладок, он выбирает первый набор и его вкладку.

Я знаю, что мне нужно различать эти два элемента, но я не уверен, какой наилучший способ для этого. Вкладки будут созданы с использованием цикла while в WordPress, поэтому я могу назначить переменную с помощью PHP, если мне нужно добавить идентификатор или что-то подобное к каждому набору вкладок. Заранее спасибо

Code pen:https://codepen.io/adamrconnah/pen/XGVNBo

HTML/CSS:

 .moretabs {
  display: flex;
  flex-wrap: wrap;
  /*max-width: 700px;*/
  background: #e5e5e5;
  box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
    padding:5px;
  margin-bottom:30px;
}
.moreinput {
  position: absolute;
  opacity: 0;
}
.morelabel {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}
.morelabel:hover {
  background: #d8d8d8;
}
.morelabel:active {
  background: #ccc;
}
.moreinput:focus   .morelabel {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  z-index: 1;
}
.moreinput:checked   .morelabel {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .morelabel {
    width: auto;
  }
}
.panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}
@media (min-width: 600px) {
  .panel {
    order: 99;
  }
}
.moreinput:checked   .morelabel   .panel {
  display: block;
}  
 <div class="moretabs">
   <input class="moreinput" name="moretabs" type="radio" id="tab-1" checked="checked"/>
   <label class="morelabel" for="tab-1">Banana</label>
   <div class="panel">
      <h1>Banana</h1>
      <p>Some text</p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-2"/><label class="morelabel" for="tab-2">Orange</label>
   <div class="panel">
      <h1>Orange</h1>
      <p></p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-3"/><label class="morelabel" for="tab-3">Apple</label>
   <div class="panel">
      <h1>Apple</h1>
      <p>Some text.</p>
   </div>
</div>
<div class="moretabs">
   <input class="moreinput" name="moretabs" type="radio" id="tab-1" checked="checked"/>
   <label class="morelabel" for="tab-1">Chocolate</label>
   <div class="panel">
      <h1>Chocolate</h1>
      <p>Some text</p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-2"/><label class="morelabel" for="tab-2">Bread</label>
   <div class="panel">
      <h1>Bread</h1>
      <p></p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-3"/><label class="morelabel" for="tab-3">Chips</label>
   <div class="panel">
      <h1>Chips</h1>
      <p>Some text.</p>
   </div>
</div>

Комментарии:

1. Вам не нужно повторять свои идентификаторы. [id=»tab-1″] должно быть до 6, а не 3. то же самое для разделов for =»tab-1″. используя каждый идентификатор дважды, вы дважды указываете входным данным активировать любой id =»tab-1″ с помощью команды for!

2. пожалуйста, добавьте соответствующий php-код

3. Спасибо @moose — Знал, что это будет что-то простое. Сейчас работает. Потрясающе. Я обновил свой code pen.

4. Без проблем, чувак, у меня самого была такая же проблема в прошлом, и я некоторое время ломал голову xD