仅限 CSS 和 HTML 的选项卡无法正确响应

Question

这个真的让我很困惑。这可能是我错过的一些简单的东西，但我肯定找不到它......

我创建了一个 fiddle向您展示我在说什么。

您最初看到这有 4 个部分，这些部分滚动得很好，所有链接都正常工作。从那以后，客户又添加了 1 个部分，现在由于某种原因，当我添加一个进一步的 radio 链接时，幻灯片放映的整个控制都会失败。 See what I mean here.

我添加的只是一个额外的链接和内容区域。有谁知道我做错了什么？如果您从 jsfiddle 中删除以下内容，您会发现它可以正常工作，但是对于选项卡 5 的标签，它会放弃。我不知所措......非常感谢任何帮助!

<input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" /> <label for="tab-5" class="tab-label-5">POS</label>

<div class="content-5"> <h2>Fullfilment</h2> <p>Whatever your project involves Expressive Print are experienced in delivering it for you. From daily pick and pack requirements to contract packing and bulk despatches we have the ideal space to work in - clean, modern and secure premises with packing teams who are all fully CRB checked, robust stock control systems, comprehensive insurance cover and expertise. This ensures the right things are packed in the right order and sent the right people – simple but critical. Selecting a fulfilment partner who has strong systems with full accountability and customer service resource is vital to ensure your product’s success.</p> </div>

Answer 1

演示您的 Jsfiddle

现在你只需在你的css文件中添加一行css

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4, 
.tabs input.tab-selector-5:checked ~ .content .content-5  // add this line in your css file 
{
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.3s 0.3s;
    -moz-transition: all ease-out 0.3s 0.3s;
    -o-transition: all ease-out 0.3s 0.3s;
    -ms-transition: all ease-out 0.3s 0.3s;
    transition: all ease-out 0.3s 0.3s;
}

Demo