1

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

我创建了一个小提琴来向您展示我在说什么。

您最初看到这有 4 个部分，这些部分可以正常滚动，并且所有链接都可以正常工作。此后，客户又添加了 1 个部分，现在由于某种原因，当我添加另一个无线电链接时，幻灯片放映的整个控制权就落空了。看看我在这里的意思。

我添加的只是一个额外的链接和内容区域。有谁知道我做错了什么？如果您从 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>
4

1 回答 1

0

演示你的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;
}

演示

于 2013-03-21T11:45:23.950 回答