javascript - 我想创建两个具有相同样式的选项卡，但 js 不起作用

Question

我正在使用可以创建模态的插件(模态窗口)。

在同一页面上，我有两个不同的 w3 卡(将来我可能需要更多相同布局的卡)，我使用模态打开它们。

在每个模式上我有 3 个选项卡。我从 w3school 复制了它们，这是链接 https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active .

但是这些选项卡仅适用于其中一张卡片。我更改了一张卡片上的 ID 名称以及 js 部分中的函数名称，但仍然不起作用。

我该怎么办？提前致谢，

(编辑)

<!-- card No.1--> 
<span class="wow-modal-id-1"> <!-- the code that the plugin gives-->
 <div class="w3-card-4">
  <p>Some text</p>
 </div>
</span>

<!-- card No.2-->
<span class="wow-modal-id-2">
 <div class="w3-card-4">
  <p>Some text</p>
 </div>
</span>

然后我希望在模式中有我共享链接的选项卡(只是因为它太多了我没有将它们粘贴到这里。)

Answer 1

在没有 JS 的情况下使用下面的代码

main {
  max-width: 800px;
  padding: 40px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.main-tab section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}

.main-tab input {
  display: none;
}

.main-tab label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}

.main-tab label:before {
  font-weight: normal;
  margin-right: 10px;
}


.main-tab label:hover {
  color: #789;
  cursor: pointer;
}

.main-tab input:checked + label {
  color: #0af;
  border: 1px solid #abc;
  border-top: 2px solid #0af;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

<main class="main-tab">
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Tab 1</label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Tab 2</label>
  <section id="content1">
    <p>
      Test tab 1
    </p>
  </section>
  <section id="content2">
    <p>
      Test tab 2
    </p>
  </section>
</main>