2

元のタブ: この URL を確認してください: http://basarhost.com/tab
新しいタブを追加: この URL を確認してください: http://basarhost.com/tab/mynewtab/

Web サイトでわかるように、2 番目のサイトは正しく機能しません。

これが私のJavaScriptです：

    $(document).ready(function() {

    /* Activate H5F */

    $('ul#tabs li').click(function() {

        /* If what we clicked is the actual link, we move make the changes */
        if($(this).attr("class") == "inactiveTab") {

            /* Swap classes on the clicked item */
            $(this).addClass('activeTab').removeClass('inactiveTab');

            /* Swap classes on the other LI */
            $(this).siblings('.activeTab').removeClass('activeTab').addClass('inactiveTab');

            /* Change the float of the previous element */
            $(this).prev().css("float", "left");

            /* We toggle the tabs */
            $("div.toggleTab").slideToggle("fast", function() {

                /* Once the animation is complete, focus the first field of the visible form */
                $("div.toggleTab input:visible").first().focus();

            });

        }

    });

});

何か提案はありますか？

4

1 に答える 1

2

私が提案する解決策は、functions.js の内容を次のように変更することです。

$(document).ready(function() {

    /* Activate H5F */
    H5F.setup($("div#signUp form"));

    $('ul#tabs li').click(function() {

        /* If what we clicked is the actual link, we move make the changes */
        if($(this).attr("class") == "inactiveTab") {

            /* Swap classes on the clicked item */
            $(this).addClass('activeTab').removeClass('inactiveTab');

            /* Swap classes on the other LI */
            $(this).siblings('.activeTab').removeClass('activeTab').addClass('inactiveTab');

            /* Change the float of the previous element */
            $(this).prev().css("float", "left");
        }

    });
    $('#signInTab').click(function() {
        $('#signUp').hide();
        $('#homeBill').hide();
        $("#signIn").slideToggle("fast", function() {
            /* Once the animation is complete, focus the first field of the visible form */
            $("#signIn input:visible").first().focus();
        });
    });
    $('#signUpTab').click(function() {
        $('#signIn').hide();
        $('#homeBill').hide();
        $("#signUp").slideToggle("fast", function() {
            /* Once the animation is complete, focus the first field of the visible form */
            $("#signUp input:visible").first().focus();
        });
    });
    $('#homeBillTab').click(function() {
        $('#signIn').hide();
        $('#signUp').hide();
        $("#homeBill").slideToggle("fast");
    });

});

また、新しい div css を非表示に設定する必要があります。

div#homeBill { display: none; }

CSS FIX: 煩わしいタブの切り替えをなくすために、CSS を次のように変更することをお勧めしますul#tabs li。

ul#tabs li {
    padding: 25px;
    float: left;
    width: 27.36%;
}

から削除float: right;しますul#tabs li.inactiveTab

お役に立てれば！

于 2013-04-23T19:13:31.543 に答える