如何使 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" );