时间戳

首页 > 解决方案 > 使用 jquery 显示块后 Jquery 插件不起作用

javascript - 使用 jquery 显示块后 Jquery 插件不起作用

问题描述

我想在我的项目中使用一些 div，比如带有 jQ​​uery 的选项卡。在 div 里面我想使用另一个 jQuery 插件。我使用 jQuery 手动构建了这些 div 选项卡，第二个和更多 div 的默认样式是display: none纯 css 或 class name 。当我将 div 的显示更改为 div 内display: block的第二个 jQuery 插件不起作用时。

当我使用代码打击隐藏 div 并且不使用纯 css 或类名时，只有第二个 jQuery 插件可以正常工作：

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

问题显示在这种情况下，当第一次加载 html 页面时，使用 jquery 隐藏 div 会有大约 1 秒的延迟。除了在这种情况下使用加载徽标之外还有什么建议吗？

我使用了引导选项卡，问题仍然存在。

在这种情况下，我如何使用预定义的类或纯 css 到display: nonediv 并且客户端单击按钮以显示 div 和第二个 jQuery 插件在 div 内正常工作？

<div class="tabs-wrapper">
    <div class="tab-container tab1">
        some code here
    </div>
    <div class="tab-container tab2 d-none">
        <div>
            second jquery plugin code here
        </div>
    </div>
</div>

<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>

<script>
$(function(){
    $('#btn1').click(function () {
        $('.tabs-wrapper .tab1').addClass('d-none');
        $('.tabs-wrapper .tab2').removeClass('d-none');
    });

    $('#btn2').click(function () {
        $('.tabs-wrapper .tab2').removeClass('d-none');
        $('.tabs-wrapper .tab1').addClass('d-none');
    });
});
</script>

当我使用 css 类或内联样式隐藏 div 时，第二个 jQuery 插件不起作用，第二个插件就像相同的 jquery 滑块。

标签： javascriptjqueryhtmlcss

解决方案

请附上您希望它运行的内部代码的示例。但无论如何，代码不会仅仅因为您隐藏或显示 div 而运行。为此，您应该处理显示 div 时触发的事件。无论如何，为了正确显示或隐藏 div，你的代码中有一个错误。这里有 2 个可能的修复（一个被标记出来）


<style>
    .d-none
    {
        display:none;
    }
</style>
<body>

<div class="tabs-wrapper">
    <div class="tab-container tab1">
        some code here
    </div>
    <div class="tab-container tab2 d-none">
        <div>
            second jquery plugin code here
        </div>
    </div>
</div>

<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>

<script>
//Option 1
$(function(){
    $('#btn1').click(function () {
        $('.tabs-wrapper .tab1').addClass('d-none');
        $('.tabs-wrapper .tab2').removeClass('d-none');
    });

    $('#btn2').click(function () {
        $('.tabs-wrapper .tab1').removeClass('d-none');
        $('.tabs-wrapper .tab2').addClass('d-none');
    });
});
/*  Option 2
$(function(){
    $('#btn1').click(function () {
        $('.tab1').hide();
        $('.tab2').show();
    });

    $('#btn2').click(function () {
        $('.tab2').hide();
        $('.tab1').show();
    });
});
*/

</script>

推荐阅读