Question

我正在使用带有Bootstrap的标签，我想在加载标签时显示一条消息，但它不起作用;只有在加载选项卡时才会显示该消息。

HTML

<div id="loading_text">&nbsp;</div>
<ul class="nav nav-tabs navbar-default" id="tabs" style="border-top-right-radius: 3px;border-top-left-radius: 3px;">
    <li id="ong1" class="active"> <a href="#ind_qualserv" id="lien_ind_qualserv" data-toggle="tab">Onglet 1</a></li>
    <li id="ong2" ><a href="#ind_incident" id="lien_ind_incident" data-toggle="tab">Onglet 2</a></li>
    <li id="ong3" ><a href="#ind_probleme" id="lien_ind_probleme" data-toggle="tab">Onglet 3</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="cont_ong1">&nbsp;</div>
    <div class="tab-pane"        id="cont_ong2">&nbsp;</div>
    <div class="tab-pane"        id="cont_ong3">&nbsp;</div>
 </div>

Javascript for a tab

$("#ong1").click(function(e) {

    //  Loading information
    $("#loading_text").append('tab 1 is loading');

   // My function replaced here by sleep
    sleep(2);

    // Loading is finish, unshow message
    $("#loading_text").empty();
     $("#loading_text").append('&nbsp;');

});

我不想这样做： - 显示消息 - 构建选项卡的功能 - 隐藏消息

见： http://jsfiddle.net/jor7onr9/

Tab1＆amp; Tab2：点击标签我们看不到消息（因为显示和隐藏） Tab3：点击后，消息显示在最后

Answer 1

由于javascript只有一个线程，因此执行该功能似乎占用浏览器，并且没有时间呈现更新。

一种可能的解决方案是通过异步调用函数来呈现页面：

// Click on tab1
$("#ong1").click(function(e) {

    //  Loading information
    $("#loading_text").append('tab 1 is loading');

   // My function replaced here by sleep
    window.setTimeout(function() { 
        sleep(2);
        $("#loading_text").empty();
        $("#loading_text").append('&nbsp;');
    }, 50);

});

这里有一个工作小提琴：http://jsfiddle.net/jor7onr9/3/

另见Render html immediately after Jquery append

加载Bootstrap选项卡时显示消息

1 个答案: