Question

我正在使用基本标签功能。如果我尝试在除第一个选项卡之外的任何选项卡中添加任何其他代码，它似乎不起作用。例如，在下面的代码中，我试图使用插件来设置选择框的样式。如果选择框在第一个选项卡中，那么它可以工作，如果它在选择选项卡中，则它不会。这可能是因为一些jQuery加载sequance，但我在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();

});

Answer 1

首先，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

中使用

jQuery代码在选项卡中不起作用

1 个答案: