Foundation 5 Sekmeler ve Akordeon çalışmıyor gibi görünüyor

Question

Ben Vakfı 5 çerçeve kullanıyorum ve sağladıkları js sekmeleri eklentisini kullanmaya çalışıyorum.

Ancak bunun yanlış yapıyorum emin değilim bu http://foundation.zurb.com/docs/components/tabs.html

gibi olmalıdır kendi sitesinde şu bir sonuç iken http://crea8tion.com/PU2/index.html#

alıyorum?

Java komut dosyası doğru bir şekilde çağrılmıyor mu?

Answer 1

Aynı şey bana da oldu. Vakfınızı inşa ettiğinizde akordeon css dahil edilmemiş gibiydi.

Standart Foundation'ı indirerek ve found.min.css dosyasının içeriğini kullandığım klasöre kopyalayarak çözdüm.

Answer 2

Bu genellikle, özel bir yapıdaysanız, gerçekleşen eksik CSS kurallarından kaynaklanır. Örneğin, burada sekmelerden ayrıldığım özel bir yapılı sayfam var.

Sonra tam bir download kurallara kopyalanır ve tarayıcıda test edilmiştir. Bu sizin sorun olup olmadığını görmek için de yapabilirsiniz. kodunda

.tabs { 
    *zoom: 1; 
    margin-bottom: 0 !important; } 
    .tabs:before, .tabs:after { 
    content: " "; 
    display: table; } 
    .tabs:after { 
    clear: both; } 
    .tabs dd { 
    position: relative; 
    margin-bottom: 0 !important; 
    top: 1px; 
    float: left; } 
    .tabs dd > a { 
     display: block; 
     background: #efefef; 
     color: #222222; 
     padding-top: 1rem; 
     padding-right: 2rem; 
     padding-bottom: 1.0625rem; 
     padding-left: 2rem; 
     font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
     font-size: 1rem; } 
     .tabs dd > a:hover { 
     background: #e2e2e2; } 
    .tabs dd.active a { 
     background: #fff; } 
    .tabs.radius dd:first-child a { 
    -moz-border-radius-bottomleft: 3px; 
    -moz-border-radius-topleft: 3px; 
    -webkit-border-bottom-left-radius: 3px; 
    -webkit-border-top-left-radius: 3px; 
    border-bottom-left-radius: 3px; 
    border-top-left-radius: 3px; } 
    .tabs.radius dd:last-child a { 
    -moz-border-radius-topright: 3px; 
    -moz-border-radius-bottomright: 3px; 
    -webkit-border-top-right-radius: 3px; 
    -webkit-border-bottom-right-radius: 3px; 
    border-top-right-radius: 3px; 
    border-bottom-right-radius: 3px; } 
    .tabs.vertical dd { 
    position: inherit; 
    float: none; 
    display: block; 
    top: auto; } 

.tabs-content { 
    *zoom: 1; 
    margin-bottom: 1.5rem; } 
    .tabs-content:before, .tabs-content:after { 
    content: " "; 
    display: table; } 
    .tabs-content:after { 
    clear: both; } 
    .tabs-content > .content { 
    display: none; 
    float: left; 
    padding: 0.9375rem 0; } 
    .tabs-content > .content.active { 
     display: block; } 
    .tabs-content > .content.contained { 
     padding: 0.9375rem; } 
    .tabs-content.vertical { 
    display: block; } 
    .tabs-content.vertical > .content { 
     padding: 0 0.9375rem; } 

@media only screen and (min-width: 40.063em) { 
    .tabs.vertical { 
    width: 20%; 
    float: left; 
    margin-bottom: 1.25rem; } 

    .tabs-content.vertical { 
    width: 80%; 
    float: left; 
    margin-left: -1px; } } 
ul.pagination { 
    display: block; 
    height: 1.5rem; 
    margin-left: -0.3125rem; } 
    ul.pagination li { 
    height: 1.5rem; 
    color: #222222; 
    font-size: 0.875rem; 
    margin-left: 0.3125rem; } 
    ul.pagination li a { 
     display: block; 
     padding: 0.0625rem 0.625rem 0.0625rem; 
     color: #999999; 
     -webkit-border-radius: 3px; 
     border-radius: 3px; } 
    ul.pagination li:hover a, 
    ul.pagination li a:focus { 
     background: #e6e6e6; } 
    ul.pagination li.unavailable a { 
     cursor: default; 
     color: #999999; } 
    ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { 
     background: transparent; } 
    ul.pagination li.current a { 
     background: #008cba; 
     color: white; 
     font-weight: bold; 
     cursor: default; } 
     ul.pagination li.current a:hover, ul.pagination li.current a:focus { 
     background: #008cba; } 
    ul.pagination li { 
    float: left; 
    display: block; } 

Yapıştır elle kod eklemek ya da sadece vakıf css dosyaları da değiştirmenin

Sonra devam edebilirsiniz test etmek. benim için çalıştı Ne

Answer 3

5.3.3 için (JS ve CSS dosyaları ikisi) yükseltme geçerli:

• http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.min.css
• http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/js/foundation.min.js

(Şu kadar iyi çalışır 5.4.0 kullanılarak iyi).

Answer 4

Ders # 1. Özel form oluşturur Zurb her zaman uygun değildir. Orada birkaç kez yandı. Tüm shebang'ı Artur Barsheghyan olarak indirmek sorunu çözüyor. Özelleştirmenize bağlı olarak 50kb veya daha fazla bir maliyetle. bağlantı da önerdi

olmayan minimize sürümü için geçerlidir: http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.css
eksik olduğunu avcılık ve özel indirmek takarak gibi hissediyorsan ...

şiddetle öneririm manuel avı ve düzenleme. Akordeon bitlerini kaybettim ve 3056 işareti küçültülmüş dosyanın 30 satırında.