फाउंडेशन 5 टैब और एकॉर्डन काम नहीं कर रहा है

Question

मैं फाउंडेशन 5 ढांचे का उपयोग कर रहा हूं और जेएस टैब प्लगइन का उपयोग करने की कोशिश कर रहा हूं।

हालांकि मैं निम्नलिखित परिणाम हो रही है http://crea8tion.com/PU2/index.html#

जबकि अपनी साइट पर यह इस http://foundation.zurb.com/docs/components/tabs.html

सुनिश्चित नहीं हैं कि मैं गलत क्या कर रहा तरह होना चाहिए?

क्या यह है कि जावा स्क्रिप्ट सही ढंग से नहीं कहा जा रहा है?

Answer 1

वही बात मेरे साथ हुई। ऐसा लगता है कि जब आप अपने फाउंडेशन बिल्ड को अनुकूलित करते हैं तो एग्रीजन सीएसएस शामिल नहीं किया गया था।

मैंने मानक फाउंडेशन डाउनलोड करके और foundation.min.css की सामग्री को उस फ़ोल्डर में कॉपी करके हल किया जिसे मैं उपयोग कर रहा हूं।

Answer 2

आमतौर पर गायब सीएसएस नियमों के कारण होता है, जो तब होता है जब आप कस्टम निर्माण करते हैं। उदाहरण के लिए, मेरा पृष्ठ कस्टम निर्माण के साथ है जहां मैंने टैब छोड़े थे।

मैं तो पूरी तरह से डाउनलोड से नियमों पर नकल की और ब्राउज़र में यह परीक्षण किया गया। यह देखने के लिए आप यह भी कर सकते हैं कि यह आपका मुद्दा है या नहीं।

कोड में

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

पेस्ट का परीक्षण करने के

तो फिर तुम करने के लिए या तो स्वयं कोड में जोड़ने के लिए या सिर्फ नींव सीएसएस फ़ाइलों को प्रतिस्थापित आगे बढ़ सकते हैं।

Answer 3

क्या मेरे लिए काम किया 5.3.3 में नवीनीकृत (दोनों जे एस और सीएसएस फ़ाइलें) है:

• 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

(वर्तमान में 5.4.0, जहां के रूप में ठीक काम करता है का उपयोग करते हुए कुंआ)।

Answer 4

पाठ # 1। कस्टम बिल्ड फॉर्म ज़र्ब हमेशा उचित नहीं है। वहां कुछ बार जला दिया गया था। आर्टूर बरशेघ्यान के रूप में पूरे शेबांग को डाउनलोड करने से पता चलता है कि समस्या हल हो जाती है। आपके अनुकूलन के आधार पर कुछ 50kb अतिरिक्त या तो लागत पर।

लिंक भी सुझाव दिया है गैर कम से कम संस्करण के लिए लागू होता है: http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.css
यदि आप शिकार क्या कमी है और अपने कस्टम डाउनलोड में डालने का मन ...

मैं दृढ़ता से सुझाव है कि मैनुअल शिकार और संपादित करें। मेरे पास एग्रीजन बिट्स गायब थे और वे गैर-न्यूनतम फ़ाइल के 3056 अंक पर 30 लाइनें हैं।