怎么使 jquery ui tabs 的每个tab代表一个非Ajax的链接

如何使 jquery ui tabs 的每个tab代表一个非Ajax的链接
你有没有这样朴素的需求？

  用一个Tab Group, 里面放两个tab, 并且每个tab代表一个链接；
  切换tab时，不通过AJAX获得内容，而是重新渲染整个页面；
  渲染后的页面里还是能看到这个Tab Group，只不过现在高亮的tab是另一个了。
 

如何用jquery ui的tabs实现这个东西？  我们一步一步来。
 
  A.页面展现时应该高亮哪个tab? 让服务器端传一个参数过来吧。Tab 0对应的Servlet把这个参数值置为0, Tab 1则置为1.
  

        $("#theTabs").tabs("select", ${tabIndex});   

  
  B. 分别给两个 tab指定链接

    $("#theTabs").tabs( "url" , 0 , "servlet0.do" );    $("#theTabs").tabs( "url" , 1 , "servlet1.do" );

  C.为Tab绑定select事件，使之被选中时触发URL跳转。请注意其中的 if(url)这个判断

    $("#theTabs").tabs({     select: function(event, ui) {        var url = $.data(ui.tab, 'load.tabs');        if( url ) {            location.href = url;            return false;        }        return true;    }    });

把这三段JS代码依次抄到页面里就可以吗？  错了，顺序不应该是这样的。

第一段代码调用了Tab的select方法，这个方法会触发第三段代码中的select事件；
第三段代码中可能会发生URL跳转，而我们只希望用户点击Tab时才跳转，在首次进入页面时肯定不能跳，否则就会导致死循环： 进入页面 -> 跳转到本页面 -> 进入页面 ->跳转到本页面 ->.... ；
为了避免这种情况，就应该保证首次进入页面时，第三段代码中的url变量值为空；也就是说，首次进入页面执行第三段代码时，应保证第二段代码未被执行。


综上所述，最后的代码应为：

//第三段    $("#theTabs").tabs({    select: function(event, ui) {  var url = $.data(ui.tab, 'load.tabs');        if( url ) {            location.href = url;            return false;        }        return true;    }    });    //第一段    $("#theTabs").tabs("select", ${tabIndex} - 1);    //第二段    $("#theTabs").tabs( "url" , 0 , "servlet0.do" );    $("#theTabs").tabs( "url" , 1 , "servlet1.do" );

查看更多 下一篇