Jquery плагин не работает после отображения блока с jquery - PullRequest
Новая
       1

Jquery плагин не работает после отображения блока с jquery

1 голос
/ 12 января 2020

Я хочу использовать в моем проекте несколько таких элементов, как вкладки с jQuery. Внутри div я хочу использовать другой плагин jQuery. Я создал эти вкладки div вручную с помощью jQuery, и стиль по умолчанию для второго и более элементов div - display: none с чистым css или именем класса. Когда я изменяю отображение divs на display: block, второй плагин jQuery внутри div не работает.

Только второй плагин jQuery может работать правильно, когда я использую код для скрытия div и не использую pure css или имя класса: 

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

В этом случае возникает проблема, когда html при загрузке страницы в первый раз возникает задержка около 1se c для скрытия div с jquery , Любое предложение, кроме использования загрузки lo go для этого случая?

Я использовал bootstrap вкладки, и проблема все еще существует.

Как я могу использовать предопределенный класс или чистый css to display: none div для этого случая и клиент нажимает на кнопку, чтобы показать 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 класс или встроенный стиль для скрывает divs, второй плагин jQuery не работает, второй плагин похож на те же jquery слайдеры.

Ответы [ 2 ]

0 голосов
/ 12 января 2020

Пожалуйста, приложите пример внутреннего кода, который вы хотите запустить. Но в любом случае код не запускается только потому, что вы скрываете или отображаете 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>
0 голосов
/ 12 января 2020 

$('#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');
        });
.d-none
{
    display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Вы можете попробовать этот способ 

$(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');
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...