0

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

});
4

1 回答 1

5

首先，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演示中对我来说很好用

于 2013-06-17T12:45:45.670 回答