我如何用Jquery或javascript重新编写这个css？

我正在尝试将其重新编写为jquery或js，因为我需要向选项卡面板添加一个循环，例如.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;
}

---

下面的示例演示了如何使用JavaScript显示和隐藏元素，使用
控制显示的面板组，并使用复选框控制要显示的选项卡面板

您应该能够修改它以适合您的特定应用程序


//手柄面板组编号选择
常数组计数=3；
功能手柄选择（选择）{
//获取要显示的面板组编号
const showNum=+（select.value）；
//显示或取消显示每个面板组
对于（让i=1；我的问题是你需要处理任意数量的元素？是的，我需要选项卡面板将php合并到类中以循环通过它，但是，我无法在css中实现这一点。因此你需要一些JavaScript为类动态创建单独的css规则。'.tab-panel1'，tab-panel2'，等等。这正确吗？可能包括所需成品的一些HTML？提供的CSS没有告诉我们太多。Hi@terrymorse我添加了一些HTML。目标是让CSS动态，以便在类上进行检查，这也将是动态的。我希望如果我能在jquery或js中进行同样的CSS检查，我将能够在类后面添加下一个CSS，以便r它只影响特定的选项卡。@ktrea请添加一些完成的HTML。您的问题中没有显示像
.tabset
和
input
这样的元素。请给出一个完成的HTML的示例。