如何使jQuery水平选项卡一次加载页面 [英] How to make a jQuery Horizontal Tab that loads the page once

问题描述

我想要一个jQuery水平选项卡窗格(下面的屏幕截图)，单击某个选项卡将在div中加载一个外部页面，但是在加载后单击该选项将不会再次加载该页面.

I want a jQuery horizontal tab pane (screenshot below) where clicking on a tab loads an external page in the div but where clicking on it after it is loaded does not load the page again.

有7个标签Wall，Latest，Discussion，Poll，Club Message，Create.

There are 7 tabs Wall, Latest, Discussion, Poll, Club Message, Create.

可以在此处查看演示 http://www.web-shine.in/tabs/

我希望TAB加载一次页面，下次用户单击它时，它应该从浏览器缓存而不是从服务器显示页面.

I want the TAB to load the page once, and next time the user clicks on it, it should show the page from browser cache, not from the server.

编写此代码的最佳方法是什么?

What is the best way to code this?

推荐答案

尝试如下操作:

var cache = {};

function loadTab(tabObj) {
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).fadeOut(100);

    var target = tabObj.attr('href');

    if (cache[target] !== undefined) {
        $(containerId).html(cache[target]);
        $(containerId).slideDown('medium');
        $(containerId).fadeIn('slow');
    } else {
        $(containerId).load(tabObj.attr('href'), function()
        {
            cache[target] = $(containerId).html();
            $(containerId).slideDown('medium');
            $(containerId).fadeIn('slow');
        });
    }
}

这篇关于如何使jQuery水平选项卡一次加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！