动态 link 单选按钮选项卡到内容 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;
  }

最初，当检查具有tab-1 ID的无线电按钮时，显示了div的ID content-1，但现在不再适用于content-1我现在正在使用来自我的数据库的传入 ID 动态创建单选按钮，例如：#tab-100, #tab-101, #tab-102 和 divs 以及 #content-100, #content-101, #content-102。我需要我的 CSS 也是动态的，所以当 #tab-100 被选中时，它会自动显示 #content-100。我知道我可以用 javascript 做到这一点，但我想相信有一种方法可以用 CSS.

做到这一点

Answer 1

您可以为选项卡和内容元素提供 class（例如 tab 和 tab-content）和 select 所需的元素 :nth-of-type select或者和对应的数字。

例如，如果选中第一个选项卡 (.tab:nth-of-type(1):checked)，select 第一个内容 (.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 的解决方案会自动为生成的元素提供所需的 selector。

但是还有另一种方法可以解决这个问题。在此解决方案中，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>

Answer 2

我后来使用 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>

JS:

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 很有帮助。

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

Dynamically link radio button tabs to content div

html

javascript

css

dynamic

radio-button

编辑