2016-07-09 7 views
0

私はセマンティックUIからタブの例を試していますが、私はそれを動作させることはできません。タブは変更されません。私は何かを含めることを忘れましたか?タブが機能しないのはなぜですか?

$(function() { 
 
    $('.menu .item').tab(); 
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script> 
 
<div class="ui top attached tabular menu"> 
 
    <a class="item active" data-tab="first">First</a> 
 
    <a class="item" data-tab="second">Second</a> 
 
    <a class="item" data-tab="third">Third</a> 
 
</div> 
 
<div class="ui bottom attached tab segment active" data-tab="first"> 
 
    First 
 
</div> 
 
<div class="ui bottom attached tab segment" data-tab="second"> 
 
    Second 
 
</div> 
 
<div class="ui bottom attached tab segment" data-tab="third"> 
 
    Third 
 
</div>

+1

はい、あなたのCSS .. –

+0

@CarolMcKayコードを消去したときに修正しました。たぶんそれはうまくいかなかったオーバーライドかjsでした。助けてくれてありがとう:-) –

答えて

1

私はあなたのタブの作品を作るために、この

$(function() { 
    $('.menu .item').tab(); 
}); 

を呼び出す必要があります信じて。

そしてsemantic-uiにはあなたが見るべき素晴らしい文書があります。

+0

しかし、そのコードはどこにあるべきですか?私はそれを実行しようとしたが、それは問題を解決しません。タブは、想定されているように切り替えられません。 –

+1

@ Programmer400このコードが必要な場所を追加しました。まだ動作しない場合は、問題に必要な細部だけでコードを編集してください。 –

+0

クール、それは働いた。私はちょうどコードを掃除しなければならなかった。 –

関連する問題