1

我有一个选项卡式内容。基于以下 HTML：

<ul class="tabContainer">
</ul>

<div id="tabContent">
     <div id="contentHolder">
        <!-- The AJAX fetched content goes here -->
     </div>
   <div id="pagination"></div>
</div>

f_tab 是管理上述 HTML 内容的函数，包括以下操作：

  • 生成选项卡。
  • 执行获取 php 页面并在选项卡持有者中返回结果的 AJAX。

  • 使用 jPaginator 插件（https://github.com/remylab/jpaginator）对内容持有者内的每个内容进行分页：

     function f_tab(str){
$(document).ready(function(){

        var Tabs = {
        '1' : 'page1.php?p='+var,
        '2' : 'page2.php?p='+var,
        '3' : 'page3.php?p='+var,

    }


 var topLineColor = {
    blue:'lightblue',
    blue:'lightblue',
    blue:'lightblue',}


$.each(Tabs,function(i,j){

    var tmp = $('<li><a href="" class="tab">'+i+' <span class="left" /><span class="right" /></a></li>');


    tmp.find('a').data('page',j);


    $('ul.tabContainer').append(tmp);
})


var the_tabs = $('.tab');

the_tabs.click(function(e){

    var element = $(this);


    if(!element.data('cache'))
    {   

        $.get(element.data('page'),function(msg){
            $('#contentHolder').html(msg);
            element.data('cache',msg);
        });
    }
    else {
    $('#contentHolder').html(element.data('cache'));

    }
    e.preventDefault();

})

the_tabs.eq(2).click();    });       return false;        }

分页功能（仅供参考）是：

 (function($){

    $.fn.extend({ 
        MyPagination: function(options) {
            var defaults = {
                height: 600,
                fadeSpeed: 1000
            };
            var options = $.extend(defaults, options);

            //Creating a reference to the object
            var objContent = $(this);

            // other inner variables
            var fullPages = new Array();
            var subPages = new Array();
            var height = 0;
            var lastPage = 1;
            var paginatePages=null;
            var numero=0;

            // initialization function
            init = function() {
                objContent.children().each(function(i){
                    if (height + this.clientHeight > options.height) {
                        fullPages.push(subPages);
                        subPages = new Array();
                        height = 0;
                    }

                    height += this.clientHeight;
                    subPages.push(this);
                });

                if (height > 0) {
                    fullPages.push(subPages);
                }

                // wrapping each full page
                $(fullPages).wrap("<div class='page'></div>");

                // hiding all wrapped pages

                objContent.children().hide();


                // making collection of pages for pagination
                paginatePages = objContent.children();


                numero=$(paginatePages).length;

                // show first page
                showPage(lastPage);

            };



            // show page function
            showPage = function(page) {
                i = page - 1; 
                if (paginatePages[i]) {

                    // hiding old page, display new one
                    $(paginatePages[lastPage]).hide();
                    lastPage = i;
                    $(paginatePages[lastPage]).fadeIn(options.fadeSpeed);

                }
            };

            // show pagination function (draw switching numbers)

            // perform initialization
            init();


            //$(document).ready(function(){
            $("#pagination").jPaginator({ 
                nbPages:numero,
                marginPx:5,
                nbVisible:8, 
                overBtnLeft:'#over_backward', 
                overBtnRight:'#over_forward', 
                maxBtnLeft:'#max_backward', 
                maxBtnRight:'#max_forward', 
                onPageClicked: function(a,num) {

                    showPage(num);
                } 
            });
            //});

        }
    });
})(jQuery);

问题： 如何让浏览器在从一个选项卡传递到另一个选项卡时记住选项卡中最后显示的页面。比如tab1显示的最后一页是page5，点击另一个tab后又回到tab1，怎么才能看到tab1的page5呢？

感谢您的时间。帮助表示赞赏。

4

1 回答 1

1

因为您正在 AJAX 加载每个选项卡，所以它会丢失所有状态信息。据我所知，您有以下选择：

  1. 不要 AJAX 加载选项卡。这意味着页面的加载时间更长，但更改选项卡之间的等待时间更少。

  2. 理想：更改您的选项卡更改功能以检查内容是否已加载。如果尚未完成，则仅在内容中使用 AJAX。

  3. 将页面状态保存在变量中，并在每次加载选项卡时将页面更改为变量值。

于 2013-03-22T15:08:59.187 回答