如何将加载微调器图像添加到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并加载事件来执行此操作.

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,希望能帮到你.