Как мне переписать это css с Jquery или javascript?

Question

Я пытаюсь переписать это как jquery или js, потому что мне нужно добавить al oop на панель вкладок, например .tab-panel1, .tab-panel2, чтобы можно было использовать несколько вкладок на странице и не влияют друг на друга.

  <div class="tab-panels<?php echo $count ?>">
    <section id="about<?php echo $count ?>"class="tab-panel">
    </section>
    <section id="contact-sbf<?php echo $count ?>"class="tab-panel">
    </section>
  </div>

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

Answer 1

Вот пример, показывающий, как показывать и скрывать элементы, используя JavaScript, используя <select> для управления отображаемой группой панелей и флажки для управления тем, какие панели вкладок отображать.

Вы должны иметь возможность чтобы изменить это в соответствии с вашим конкретным приложением c.

// handle panel group number selection
const GROUP_COUNT = 3;

function handleSelection(select) {
  // get panel group number to be shown
  const showNum = +(select.value);

  // show or unshow each panel group
  for (let i = 1; i <= GROUP_COUNT; i++) {
    const panelGroup = document.getElementById(`panelgroup${i}`);
    if (i == showNum) {
      panelGroup.classList.add('show');
    } else {
      panelGroup.classList.remove('show');
    }
  }
}

// handle click on a "show children" checkbox
function handleCheck(input) {
  const { checked, value } = input;
  const panels = document.getElementsByClassName('tab-panel');

  // show (hide) all the matching '.tab-panel' elements
  for (const panel of panels) {
    if (panel.dataset.child === value) {
      if (checked) {
        panel.classList.add('show');
      } else {
        panel.classList.remove('show');
      }
    }
  }
}

.panel-group {
  margin: 0.5rem;
  padding: 0.5rem;
  border: 1px solid gray;
  display: none;
}

.panel-group:before {
  content: "#" attr(id);
  color: #aaa;
}

.tab-panel {
  margin: 0.5rem;
  padding: 0.5rem;
  border: 1px solid green;
  color: green;
  display: none;
}

.tab-panel:before {
  content: "." attr(class);
  color: #aaa;
  padding-right: 0.5rem;
}

.show {
  display: block;
}

<form>
  <label for="panelsnum">Show panel group number</label>
  <select id="panelsnum" onchange="handleSelection(this);">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="1">3</option>
  </select><br/>
  <label for="checks">Show panels:</label>
  <input type="checkbox" name="checks" value="1" onchange="handleCheck(this);" /> 1
  <input type="checkbox" name="checks" value="2" onchange="handleCheck(this);" /> 2
  <input type="checkbox" name="checks" value="3" onchange="handleCheck(this);" /> 3
</form>

<div id="panelgroup1" class="panel-group show">
  <div class="tab-panel" data-child="1">group1 first-child</div>
  <div class="tab-panel" data-child="2">group1 second-child</div>
  <div class="tab-panel" data-child="3">group1 third-child</div>
</div>

<div id="panelgroup2" class="panel-group">
  <div class="tab-panel" data-child="1">group2 first-child</div>
  <div class="tab-panel" data-child="2">group2 second-child</div>
  <div class="tab-panel" data-child="3">group2 third-child</div>
</div>

<div id="panelgroup3" class="panel-group">
  <div class="tab-panel" data-child="1">group3 first-child</div>
  <div class="tab-panel" data-child="2">group3 second-child</div>
  <div class="tab-panel" data-child="3">group3 third-child</div>
</div>