Jquery.ui.tab插件通过程序激活制定的tab方法

feiyang10086

Jquery.ui.tab插件通过程序激活制定的tab方法

之前使用jquery的jquery-ui-1.7.2.tabs.js插件（http://docs.jquery.com/UI/Tabs），都是通过鼠标事件在页面点击来切换不同的tab，现在需要通过后台程序来控制，结果发现实现不了（很久了，懒得去看官网的说明），搞了几次都失败。无奈只好上官网看看，在此记录一下：

初始化tabs：
页面代码

Java代码

1. 1.<div id="tabs" style="margin: 0px;padding: 0px;">   
   
2. 2.                        <ul>   
   
3. 3.                            <li>   
   
4. 4.                                <a href="#tab1">×××× Location</a>   
   
5. 5.                            </li>   
   
6. 6.                            <li>   
   
7. 7.                                <a href="#tab2">×××× Status</a>   
   
8. 8.                            </li>   
   
9. 9.                            ........   
   
10. 10.                        </ul>   
    
11. 11.                        <div id="tab1" style="padding: 3px;">   
    
12. 12.                            <div id="map" style="height: 375px; width:98%; border: 1px #A5B6C8 solid;" ></div>   
    
13. 13.  
    
14. 14.                        <div id="tab2" style="padding: 3px;">   
    
15. 15.                            <div id="status" style="height: 375px; width:98%; border: 1px #A5B6C8 solid;" ></div>   
    
16. 16.                          ........   
    
17. 17.                        </div>  
    
18.     <div id="tabs" style="margin: 0px;padding: 0px;">
    
19.                             <ul>
    
20.                                 <li>
    
21.                                     <a href="#tab1">×××× Location</a>
    
22.                                 </li>
    
23.                                 <li>
    
24.                                     <a href="#tab2">×××× Status</a>
    
25.                                 </li>
    
26.                                 ........
    
27.                             </ul>
    
28.                             <div id="tab1" style="padding: 3px;">
    
29.                                 <div id="map" style="height: 375px; width:98%; border: 1px #A5B6C8 solid;" ></div>
    
30. 
    
31.                             <div id="tab2" style="padding: 3px;">
    
32.                                 <div id="status" style="height: 375px; width:98%; border: 1px #A5B6C8 solid;" ></div>
    
33.                               ........
    
34.                             </div>

复制代码

Java代码

1. 1.$(function() {   
   
2. 2.  
   
3. 3.       // 初始化tabs的页面控件   
   
4. 4.    $("#tabs").tabs( {   
   
5. 5.           
   
6. 6.               // 自定义显示方法，通过事件控制   
   
7. 7.        show : function(event, ui) {   
   
8. 8.  
   
9. 9.            var activeTab = 0;   
   
10. 10.               
    
11. 11.            if (activeTab != $("#tabs").tabs('option', 'selected')) {   
    
12. 12.                  
    
13. 13.                activeTab = $("#tabs").tabs('option', 'selected');   
    
14. 14.                switch (activeTab ) {   
    
15. 15.                       
    
16. 16.                    case 0:   
    
17. 17.                        break;   
    
18. 18.                    case 1:   
    
19. 19.                        $("#tab2").show();   
    
20. 20.                        break;   
    
21. 21.                }   
    
22. 22.            }   
    
23. 23.               
    
24. 24.            return true;   
    
25. 25.        }   
    
26. 26.    });   
    
27. 27.});  
    
28. $(function() {
    
29. 
    
30.        // 初始化tabs的页面控件
    
31.         $("#tabs").tabs( {
    
32.                
    
33.                // 自定义显示方法，通过事件控制
    
34.                 show : function(event, ui) {
    
35. 
    
36.                         var activeTab = 0;
    
37.                        
    
38.                         if (activeTab != $("#tabs").tabs('option', 'selected')) {
    
39.                                
    
40.                                 activeTab = $("#tabs").tabs('option', 'selected');
    
41.                                 switch (activeTab ) {
    
42.                                        
    
43.                                         case 0:
    
44.                                                 break;
    
45.                                         case 1:
    
46.                                                 $("#tab2").show();
    
47.                                                 break;
    
48.                                 }
    
49.                         }
    
50.                        
    
51.                         return true;
    
52.                 }
    
53.         });
    
54. });

复制代码

通过程序控制激活的tab，想简单，
直接掉$("#tab2").show();死活不行，实现当前激活的仍然是默认的tab1（index为0）,
或者$("#tabs").tabs({ selected: 1 });程序制定激活tab2、不行，
或者$("#tabs").tabs({ selected: 1 }); $("#tab2").show();程序制定激活tab2、还不行，
........

重复折腾了几次，失败告终，只好看官网,原来setter方法搞过了：

Java代码

1. 1.showStatusTab=function(vehicleID){   
   
2. 2.      
   
3. 3.    if($("#tabs").tabs('option', 'selected') != 1){   
   
4. 4.               
   
5. 5.        // 如果当前激活的不是第二个tab，则激活第二个tab   
   
6. 6.                // 参数1：表示参数，参数2：要设置的属性，参数3：设置的值（index从0开始）   
   
7. 7.        $("#tabs").tabs("option", "selected", 1);   
   
8. 8.    }   
   
9. 9.}  

复制代码

梦境照进现实

谢谢分享