0

基本的なタブ機能を使用しています。最初のタブ以外のいずれかのタブに他のコードを追加しようとすると、機能しないようです。たとえば、次のコードでは、プラグインを使用して選択ボックスのスタイルを設定しようとしています。選択ボックスが最初のタブにある場合は機能し、選択タブにある場合は機能しません。これはおそらく jQuery のロード シーケンスによるものですが、Firebug コンソールでエラーを見つけることができません。

このデモをチェックして、エラーを確認してください。

http://jsfiddle.net/qpv6x/

コード：

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });

   $('select.style').customSelect();

});
4

1 に答える 1

5

まず、隠されているためcustomSelect();、正しい幅を計算できません。前にselect移動$('select.style').customSelect();$('#tabs div').hide();

$(document).ready(function () {

    $('select.style').customSelect();

    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });

});

次に、タブの位置を指定します:

#tabs div {
    background: #FFFFCC;
    clear: both;
    padding: 15px;
    min-height: 200px;
    position:relative; /* <-- HERE */
}

Chrome DEMOで問題なく動作するようになりました

于 2013-06-17T12:45:45.670 に答える