2

原始标签：请检查此 URL： http ://basarhost.com/tab
添加新标签：请检查此 URL： http ://basarhost.com/tab/mynewtab/

正如您在网站上看到的那样，第二个无法正常工作。

这是我的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 回答