2013-03-21 145 views
1

這一個真的讓我困惑。這可能是我錯過了一些簡單的事情,但我肯定找不到它......只有CSS和HTML的標籤沒有正確響應

我創建了一個fiddle來向你展示我在說什麼。

您最初看到這有4個部分,這些滾動通過正常工作的所有鏈接罰款。客戶已經添加了1個部分,現在由於某種原因,當我添加更多的無線電鏈接時,幻燈片放映的整個控制權都會流入。 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> 

回答

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; 
} 

Demo

+0

哇,我知道這將是一些簡單的!非常感謝您發現!我也注意到需要下面的css,我已經添加了這個和你的額外的行jsfiddle,但仍然發現重新打印的鏈接不工作,任何想法,爲什麼這可能會發生? http://jsfiddle.net/j9Ftx/8/ .tabs input#tab-5 { \t top:120px; } – Ria 2013-03-21 13:36:33

+0

其實你可以忽略這個評論,我剛剛更新我的文件,根據jsfiddle和所有工作正常:)非常感謝你的幫助!你是個明星! – Ria 2013-03-21 13:39:02

+0

嗨,我遇到了另一個問題。客戶端剛剛要求將圖片添加到背景中,我已經完成了這一操作,並且在Chrome和IE中運行良好。然而,在Safari中圖像被切斷,請參閱http://jsfiddle.net/j9Ftx/11/我所指的。 CSS中必須有一些控制寬度的選項卡,但我找不到。感謝您的任何幫助 – Ria 2013-04-25 11:10:41