私はFoundation 5フレームワークを使用していて、それらが提供するjsタブプラグインを使用しようとしています。Foundation 5タブとアコーディオンはうまくいきません
しかし、私はそれが私が間違ってやっているわからないこの http://foundation.zurb.com/docs/components/tabs.html
ようにする必要があります自分のサイトに次のような結果にしながらhttp://crea8tion.com/PU2/index.html#
を取得していますか？
Javaスクリプトが正しく呼び出されていませんか？
これは通常、カスタムビルドを行う場合に発生するCSS規則がないためです。たとえば、ここに私のタブがないカスタムビルドのページがあります。
私は、完全なダウンロードからのルールの上にコピーして、ブラウザでそれをテストしました。これがあなたの問題であるかどうかを確認するには、どちらを実行することもできます。
.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; }
次にあなたがに進むことができ、手動でコードに追加するか、または単に基礎cssファイルを置き換える
をテストするためのコードを貼り付けます。私の仕事は何
はこれは私のために働いた！最初は問題ではないはずのものを修正するためのハックのような感じです！ありがとうJガヤルド –
5.3.3に（JSとCSSファイルの両方）をアップグレードです：
（現在として正常に動作5.4.0を使用して、よく）。
レッスン＃1。 カスタムビルドフォームZurbは、常に適切ではありません。そこに数回燃えた。 Artur Barsheghyanのようにシバン全体をダウンロードすると、問題が解決することが示唆されます。あなたのカスタマイズに応じて、約50kb余分のコストがかかります。
リンクはまた、非最小化バージョンにも適用される提案：あなたは何が不足しているか狩猟やカスタムのダウンロードに挿入するように感じる場合 http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.css
...
私は強く、そのマニュアル狩りや編集を示唆しています。私はアコーデオンのビットが欠けていたし、それらは非最小化されたファイルの3056マークで30行に過ぎない。
私はあなたのhtmlをコピーし、正常に働いています。あなたはCSSとjsへのすべてのパスが正しいですか？ – Nibbler
はい、ホストされたバージョンで私はこれが当てはまると信じています。 – Dano007