Question

原始标签：请检查此网址： http://basarhost.com/tab
添加新标签：请检查以下网址： 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();

            });

        }

    });

});

你有什么建议吗？

Answer 1

我建议的解决方案是将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： 为了摆脱恼人的标签切换，我建议将ul#tabs li的css修改为：

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

并从float: right;

中删除ul#tabs li.inactiveTab

希望这有帮助！

我无法使用javascript更改内容标签

1 个答案: