我无法使用 javascript 更改内容选项卡答案

【问题标题】：I couldn' t change content tab with javascript我无法使用 javascript 更改内容选项卡
【发布时间】：2013-04-23 16:07:04
【问题描述】：

原始标签：请检查此 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();

            });

        }

    });

});

你有什么建议吗？

【问题讨论】：

请在 jsfiddle 等可访问的站点中发布相关测试用例
这是因为float css 属性。您应该根据您的目的设置所有选项卡的float 属性，您只需将所有内容设置为float: left
欢迎来到 Stack Overflow。这怎么不能正常工作？能不能说的具体点？
@John 正如您在示例中看到的那样，我有三个 div。我想在单击选项卡时显示关系 div。
@OrkunB 我很抱歉。我过快地阅读了审查队列中的帖子，我没有看到您在代码中放置的非常清晰的 cmets。请忽略我的评论，再次欢迎您。

标签： javascript jquery css tabs

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

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

并从ul#tabs li.inactiveTab 中删除float: right;

希望这会有所帮助！

【讨论】：

完美答案。非常感谢您的详细解释。