Question

所以我使用的是symphony，我有一个这样的标签系统：

<div class="logs">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li class="list active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">PDF</a></li>
            <li class="list"><a href="#tab_2" data-toggle="tab" aria-expanded="false">Crawl</a></li>
            <li class="list"><a href="#tab_3" data-toggle="tab" aria-expanded="false">EAN/cats</a></li>
        </ul>

        <div class="tab-content tab-header">
            <div class="row">
                <div class="col-md-2"><button class="btn btn-block btn-default btn-flat affichage">Résumé</button></div>
                <div class="col-md-2"><button class="btn btn-block btn-default btn-flat affichage">Complet</button></div>
                <div class="col-md-8"><span class="log"></span></div>
            </div>
        </div>

        <div class="tab-content tab-body">
            <div class="tab-pane active" id="tab_1">

            <div class="resum"></div>
            <div class="compl"></div>

            </div>

            <div class="tab-pane" id="tab_2">

            <div class="resum"></div>
            <div class="compl"></div>

            </div>

            <div class="tab-pane" id="tab_3">

            <div class="resum"></div>
            <div class="compl"></div>

            </div>
        </div>
    </div>
</div>

使用js，当我点击一个标签时，有一个活动类系统允许显示内容（我正在使用bootstrap）

我的问题是我有一些jquery代码在活动类被放到正确的div之前执行

$('.affichage').click(function()
{
    if (! $('.tab-content .active .compl').hasClass('done') || ! $('.tab-content .active .resum').hasClass('done'))
    {
        affichage( $(this).text() );
    }

    if ($(this).text() == "Résumé") 
    {
        $('.tab-content .active .compl').addClass('hide');
        $('.tab-content .active .resum').removeClass('hide');
    }
    else
    {
        $('.tab-content .active .resum').addClass('hide');
        $('.tab-content .active .compl').removeClass('hide');
    }

});

$('.list').click(function()
{
    if (! $('.tab-content .active .resum').hasClass('done'))
    {
        affichage( "Résumé" );
    }

    $('.tab-content .active .compl').addClass('hide');
    $('.tab-content .active .resum').removeClass('hide');

});

我想知道的是，在活动类更改后是否有办法执行我的代码

欢呼声

Answer 1

 $(document).ready(function(){
    $(".nav li").click(function(){
        $(".nav li").removeClass('active'); //it will remove active class from all elements.
        $(this).addClass('active'); //this will activate active class on clicked element

     setTimeout(function() {
        //your code which you want to execute after active class.
    }, 5000); 

    });
});

在这个过程中


活动课程将被删除

比活动类将附加在点击的元素上。

这里我们使用Timeout函数，它会在5秒后执行你的其余代码。

Answer 2

感谢Mohit Kumar，但你的代码不完整（虽然它让我的方式正确）

这里是代码：

    $('.list').click(function()
{
    $(".list").removeClass('active'); 
    $(this).addClass('active'); 
    var index = $(this).find('a').attr('href').substring(1);
    console.log(index);
    $(".tab-pane").removeClass('active'); 
    $('#'+index).addClass('active');

    if (! $('.tab-content .active .resum').hasClass('done'))
    {
        affichage( "Résumé" );
    }

    $('.tab-content .active .compl').addClass('hide');
    $('.tab-content .active .resum').removeClass('hide');

});

它会更改选项卡中的活动类＆amp;在包含我想要显示的内容的div中，最后一部分是代码中缺少的内容。

谢谢，无论如何，只要你编辑答案，我就会把你的答案标记为答案，这样就适合这个问题了。

更改类“active”后执行jquery

2 个答案: