首页>>TAB标签>>tab 标签页 ajax载入 垂直显示tab选项卡(2014-04-27)

tab 标签页 ajax载入 垂直显示tab选项卡

tab 标签页 ajax载入 垂直显示tab选项卡
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div id="tabs">  
  2.             <ul>  
  3.                 <li><a href="#tabs-1">Tab 1<br />  
  4.                 <small>This is tab's description</small>  
  5.             </a></li>  
  6.                 <li><a href="#tabs-2">Tab 2<br />  
  7.                 <small>This is tab's description</small>  
  8.             </a></li>  
  9.                 <li><a href="#tabs-3">Tab 3<br />  
  10.                 <small>This is tab's description</small>  
  11.              </a></li>  
  12.                 <li><a href="#tabs-4">Tab 4<br />  
  13.                 <small>This is tab's description</small>  
  14.             </a></li>  
  15.             </ul>  
  16.             <div id="tabs-1">  
  17.   
  18.                       
  19.         </div>  
  20.             <div id="tabs-2">  
  21.             
  22.              
  23.         </div>                        
  24.             <div id="tabs-3">  
  25.                                             
  26.         </div>  
  27.             <div id="tabs-4">  
  28.                           
  29.         </div>  
  30.     </div>        

 service.php

 

PHP Code
  1. <?php  
  2. /* 
  3.  * This page will server sample contents for Smart Tab ajax option  
  4.  *  
  5.  */  
  6. //sleep(5);  
  7. if(isset($_REQUEST['tab_index'])){  
  8.   $tab_index = $_REQUEST['tab_index'];  
  9.   switch ($tab_index){  
  10.     case 0:  
  11.       getTab1Content();  
  12.       break;  
  13.     case 1:  
  14.       getTab2Content();  
  15.       break;  
  16.     case 2:  
  17.       getTab3Content();  
  18.       break;  
  19.     case 3:  
  20.       getTab4Content();  
  21.       break;      
  22.     default :  
  23.       getTabDefaultContent();  
  24.       break;  
  25.   }  
  26. }  
  27.   
  28. function getTabDefaultContent(){  
  29.   echo ' <h2>Tab Default Content</h2>    
  30.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  31.           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  32.           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  33.           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  34.           Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
  35.           </p>';  
  36. }  
  37. function getTab1Content(){  
  38.   echo ' <h2>Tab 1 Content</h2>  
  39.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  40.           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  41.           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  42.           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  43.           Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
  44.           </p> 
  45.               <ul> 
  46.                   <li>list 1</li> 
  47.                   <li>list 2</li>                        
  48.                   <li>list 3</li> 
  49.                   <li>list 4</li>                                         
  50.           </ul>    ';  
  51. }  
  52. function getTab2Content(){  
  53.   sleep(3);  
  54.   echo ' <h2>Tab 2 Content</h2>  
  55.           <p>Opps I slept on server for 3 sec so that you can see the pre loader rolling</p>';  
  56. }  
  57. function getTab3Content(){  
  58.   echo ' <h2>Tab 3 Content</h2>  
  59.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  60.           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  61.           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  62.           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  63.           Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
  64.           </p>';  
  65. }  
  66. function getTab4Content(){  
  67.   echo ' <h2>Tab 4 Content</h2>  
  68.           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  69.           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
  70.           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  71.           Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
  72.           Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
  73.           </p>';  
  74. }  
  75.   
  76. ?>  

 


原文地址:http://www.freejs.net/article_tabbiaoqian_322.html