jquery - 如何将加载微调器图像添加到 jquery 选项卡中的每个选项卡？

Question

我已经在 jquery 选项卡中加载了项目。页面加载时，我想向选项卡内可用的每个选项卡显示加载微调器图像。当显示计数标签时，我想删除微调器图像。我的代码是

html代码：

<div id="tabs" >
    <ul>
        <li>
            <a id="storesa">
                <p class="tablip">
                    Store 
                    <img id="imgStore" src="ajax-loader6.gif" style="display:none;"/>  
                    <span id="store_count"/>
                </p>
            </a>
        </li>
    </ul>
</div>

jQuery代码：

$(window).load(function () {
    if ($('#store_count').is(':visible')) {
        $('#imgStore').hide();
    }       
});

怎么做？

Answer 1

编辑 1：以下适用于远程选项卡（已加载 ajax）。您应该使用beforeLoad和load事件来执行此操作。

HTML：

<div id="tabs" >
    <ul>
        <li>
            <a id="storesa" href="http://url-on-wich-the-ajax-request-will-be-done/">
                <p class="tablip">
                    Store 
                    <img id="imgStore" src="ajax-loader6.gif"/>  
                    <span id="store_count"/>
                </p>
            </a>
        </li>
    </ul>
</div>

CSS：

#imgStore {
    display: none;
}

JS：

$(function() {
    $("#tabs").tabs({

        /* Called before tab content is loaded */
        beforeLoad: function(event, ui) {
            $('#imgStore').show();
            /* if ajax call to retrieve tab content failed */
            ui.jqXHR.error(function() {
                $('#imgStore').hide();
                ui.panel.html("An error occured while loading store infos");
            });
        },

        /* Called when tab is loaded */
        load: function(event, ui) {
            $('#imgStore').hide();
            $('#store_count').html(/* your count here */);
        }
    });
});

编辑 2：@senthil-nathan：假设您的go_to_page()函数正在加载标签内容，我编写了这个jsFiddle，希望对您有所帮助。