將單選按鈕選項卡動態鏈接到內容 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的無線電按鈕時，顯示了具有content-1的ID的DIV，但是現在，這對我不再適用於我來自我的數據庫，例如： #tab-100, #tab-101, #tab-102和 div 以及#content-100, #content-101, #content-102 。 我需要我的 CSS 也是動態的，所以當#tab-100被選中時，它會自動顯示#content-100 。 我知道我可以用 javascript 做到這一點，但我想相信有一種方法可以用 CSS 做到這一點。

Answer 1

您可以給選項卡和內容元素一個 class （例如tab和tab-content ）和 select 所需的元素與:nth-of-type選擇器和相應的數字。

例如，如果第一個選項卡被選中（ .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 解決方案會自動為生成的元素提供所需的選擇器。

但是還有另一種方法可以解決這個問題。 在此解決方案中，選項卡的位置和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));

這個答案很有幫助。