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，希望对您有帮助。

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

1 个答案: