javascript - 仅 CSS 的选项卡试行嵌套输入标签的内容

Question

一系列纯 CSS 选项卡

<ul class='tabs'>
  <li>
    <input type="radio" name="tabs" id="tab_23101" value="23101" checked />
    <label for='tab_23101'>      </label>
    <div id='tab-content_23101' class='tab-content'>   
      <label><input type="radio" class='imagepick' id="Frame_CD" name="Frame" value="23101_CD"></label>
    </div>
  </li>
  <li>
    <input type="radio" name="tabs" id="tab_23102" value="23102" />
    <label for='tab_23102'>      </label>
    <div id='tab-content_23102' class='tab-content'>
      <label><input type="radio" class='imagepick' id="Frame_CD" name="Frame" value="23102_CD"></label>
    </div>
  </li>

每个都有特定的内容，这些内容继续指定带有名称和值的进一步输入，这些名称和值被 javascript 用作呈现图像的选择器。问题在于，一个行项目中的选定值<li>对23101_CD第二个行项目（预期）无效，23102_CD因此如果选择了第二个行项目，则会呈现空白。

javascript的结构如下

$("input[type=radio]").on("change", function() {
  var Frame_image =  $("input[name=tabs]:checked").val() + "_" + $("input[name=Frame]:checked").val();
  $("#Frame").attr("src", "/small/Frame_" +  Frame_image  + ".png");

How can one add pairs (multiple) of name and value to the parent input tag as part of the HTML (the desire is to avoid having to alter existing javascript) to act as selected items checked="checked"?

标签： javascriptcss

Answer 1

目前尚不清楚为什么需要输入标签才能生孩子。您可以使用邻接选择器 ( +) 来匹配单选按钮旁边的选项卡。这是一个极简的纯 CSS 选项卡演示：

.tabs {
  display: flex;
  flex-wrap: wrap;
  background: #f0f0f0;
  border: 1px solid #ddd;
}
.tabs > input {
  display: none;
}
.tabs > label {
  padding: 0.2em 0.5em;
  background: #f0f0f0;
}
.tabs > div {
  padding: 0.5em;
  width: 100%;
  order: 100;
  background: white;
}
.tabs > input:checked + label {
  background: white;
}
.tabs > input:not(:checked) + label + div {
  display: none;
}

<div class="tabs">
  <input type="radio" name="t1" id="t1_1" checked/>
  <label for="t1_1">Tab 1</label>
  <div>
    Tab 1!
  </div>
  
  <input type="radio" name="t1" id="t1_2"/>
  <label for="t1_2">Tab 2</label>
  <div>
    Tab 2!
  </div>
  
  <input type="radio" name="t1" id="t1_3"/>
  <label for="t1_3">Tab 3</label>
  <div>
    Tab 3!
  </div>
</div>