动态链接单选按钮选项卡到内容div

Question

最初，我使用单选按钮和标签创建了一些选项卡，它们使用ID链接到相应的div，运行良好。但是问题是，我现在正在动态地创建单选按钮选项卡及其相应的div，并且希望仍然允许我的css知道在选中单选按钮时应该打开哪个选项卡。

我的CSS：

  #tab-1:checked~.content #content-1,
  #tab-2:checked~.content #content-2,
  #tab-3:checked~.content #content-3,
  #tab-4:checked~.content #content-4,
  #tab-4:checked~.content #content-5 {
      display: block;
  }

首先，当选中带有id为tab-1的单选按钮时，就会显示带有id为content-1的div，但现在这将不再适用于我，因为我现在正在动态地使用来自DB的传入id创建单选按钮，比如：#tab-100, #tab-101, #tab-102和div以及#content-100, #content-101, #content-102。我需要我的CSS也是动态的，所以当#tab-100被选中时，它会自动显示#content-100。我知道我可以用javascript来做这件事，但是我想相信有一种方法可以用CSS来完成。

Answer 1

后来我求助于使用javascript并动态地创建了一个样式元素。

HTML：

<input type="radio" id="tab-231" class="tab" name="number" value="first"><label for="tab-231">First</label><br>
<input type="radio" id="tab-232" class="tab" name="number" value="second"><label for="tab-232">Second</label><br>
<input type="radio" id="tab-233" class="tab" name="number" value="third"><label for="tab-233">Third</label><br>

<div class="tab-content" class="tabs">First content</div>
<div class="tab-content" class="tabs">Second content</div>
<div class="tab-content" class="tabs">Third content</div>

联署材料：

const tabs = $('.tabs') //getting all the inputs with class tab
let css = '';

   //dynamically select the tab elements
   for ( const tab of tabs ) {
      const split = tab.id.split('-');
      const id = split[split.length - 1];
      css += `
         #tab-${id}:checked~.content #content-${id},
      `;
   }

   css = css.trim().slice(0, -1) //make sure to remove the trailing ',' in the css text
   css += `
      {
         display: block;
      }
   `;

   //create style element and append to document head
   const style = document.createElement('style');
   document.head.appendChild(style);

   if (style.styleSheet)
      style.styleSheet.cssText = css;
   else
      style.appendChild(document.createTextNode(css));

this answer是有帮助的。

Answer 2

您可以给制表符和内容元素一个类(例如tab和tab-content)，并使用:nth-of-type选择器和相应的数字选择所需的元素。

例如，如果选中第一个选项卡(.tab:nth-of-type(1):checked)，选择第一个内容(.tab-content:nth-of-type(1))并使其可见(例如，display: block)。

​

.tab-content {
  display: none;
}

.tab:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tab:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tab:nth-of-type(3):checked ~ .tab-content:nth-of-type(3) {
  display: block;
}

<input type="radio" id="tab-231" class="tab" name="number" value="first"><label for="tab-231">First</label><br>
<input type="radio" id="tab-232" class="tab" name="number" value="second"><label for="tab-232">Second</label><br>
<input type="radio" id="tab-233" class="tab" name="number" value="third"><label for="tab-233">Third</label><br>

<div class="tab-content">First content</div>
<div class="tab-content">Second content</div>
<div class="tab-content">Third content</div>

​

编辑

不幸的是，我不知道任何CSS唯一的解决方案，可以自动为生成的元素提供所需的选择器。

但是还有另外一种方法来解决这个问题。在这个解决方案中，tab和tab-content的位置是相互依赖的。因此--如果环境允许的话--您必须始终将tab-content放在相应的tab之后，如下面的示例所示：

​

.wrapper {
  position: relative;
  padding-bottom: 2rem;
}
.tab-content {;
  display: none;
  position: absolute;
  bottom: 0;
}
.tab:checked ~ .tab-content {
  display: block;
}
.tab:checked ~ .tab-content ~ .tab-content {
  display: none;
}

 <div class="wrapper">
 
  <input type="radio" id="tab-231" class="tab" name="number" value="first"><label for="tab-231">First</label><br>
  <div id="tab-231" class="tab-content">First content</div>

  <input type="radio" id="tab-232" class="tab" name="number" value="second"><label for="tab-232">Second</label><br>
  <div id="tab-232" class="tab-content">Second content</div>

  <input type="radio" id="tab-233" class="tab" name="number" value="third"><label for="tab-233">Third</label><br>
  <div id="tab-233" class="tab-content">Third content</div>

</div>

​