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

Posted 2023-03-25

【中文标题】将单选按钮选项卡动态链接到内容 div

【英文标题】：Dynamically link radio button tabs to content div

【发布时间】：2021-08-19 09:00:44

【问题描述】：

我最初使用单选按钮和标签创建了一些标签，这些标签使用它们的 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与content-1 @显示，但现在这将不再为我工作，因为我现在动态地创建单选按钮使用来自我的数据库的传入 ID，例如：#tab-100, #tab-101, #tab-102 和 div 以及 #content-100, #content-101, #content-102。我需要CSS是动态的，所以当检查#tab-100时，它会自动显示#content-100。我知道我可以用 javascript 做到这一点，但我想相信有办法用 CSS 做到这一点。

【参考方案1】：

您可以为选项卡和内容元素指定一个类（例如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>

【讨论】：

这里的问题是我不确定传入的数据数量，所以我无法硬编码写入所有传入数据的第 n 种类型

【参考方案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 很有帮助。