CSS 显示：无 & JS .show() 破坏 JQuery 和 AjaxToolkit 日期选择器

Question

因此，我使用 java 脚本、jQuery 和 CSS 创建了一个选项卡式界面，其中我只需在包含选项卡内容的 div 上调用 .show() 和 .hide() 即可。所有这些都工作得很好；但是，其中一个选项卡需要用户使用日期选择器（我已使用 jQuery 和 AjaxToolkit DatePickers 尝试过此操作）。

日期选择器附加到第三个选项卡上的输入，并且将在我第一次进入第三个选项卡时按下该框（如预期）时显示；但是，随后显示第三个选项卡时，单击日期选择器输入根本不起作用。

控制选项卡的 java 脚本如下：

$(document).ready(function () {
    // initialize the first tab as selected
    $('#tabMenu > li:eq(0)').css('backgroundColor', '#E9E6D7')
    $('#tabMenu > li:eq(0)').addClass('selected');

    // hide all of the tabs but the first
    $('.tabBoxBody div').hide();
    $('.tabBoxBody div:eq(0)').show();

    // whenever a list item in the tab bar is clicked
    $('#tabMenu > li').click(function () {

        // make sure the tab isn't already selected
        if (!$(this).hasClass('selected')) {

            // remove selected from the old tab and add it to the new
            $('#tabMenu > li').removeClass('selected');
            $(this).addClass('selected');

            // hide the old tab's contents and show the new one's
            $('.tabBoxBody div').hide();
            $('.tabBoxBody div:eq(' + $('#tabMenu > li').index(this) + ')').show()

            // clear all background colors and set the new tab's color
            $('#tabMenu > li').css('backgroundColor', '#C2CBDA')
            $(this).css('backgroundColor', '#E9E6D7')
        }

    })

任何帮助或深入了解为什么会出现这种情况将不胜感激。

谢谢， 克里斯

Answer 1

$('.tabBoxBody div').hide();

我认为这一行会影响形成日期选择器的 div。

您可以向您的 div 添加一个类“选项卡”，然后就可以了

$('.tabBoxBody .tab').hide();    

Answer 2

每次在选项卡中加载内容时，您可以尝试将日期插件重新绑定到输入框。