1

次のコードがあります。

クリック中にタブを開いたり閉じたりすることができましたが、フェードトランジションが機能しなくなりました。

私が間違っていることを誰かが知っていますか？

ありがとうございました。

HTML:

<ul id="myTab" class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active fade in" id="home">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. </p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
    </div> 
</div>

JavaScript:

$(document).off('click.tab.data-api');
$(document).on('click.tab.data-api', '[data-toggle="tab"]', function (e) {
    e.preventDefault();
    var tab = $($(this).attr('href'));
    var activate = !tab.hasClass('active');
    $('div.tab-content>div.tab-pane.active').removeClass('active');
    $('ul.nav.nav-tabs>li.active').removeClass('active');
    if (activate) {
        $(this).tab('show');
    }
});
4

1 に答える 1

0

データ API をオフにして$(document).off('click.tab.data-api');、新しい関数を追加します。関数は、フェードの遷移を処理しません。

http://getbootstrap.com/javascript/#tabsのドキュメントを読み、javascript でタブを有効にしてみてください。

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});

参照: http://jsfiddle.net/Jp42c/13/

于 2013-09-05T08:09:08.563 に答える